使用 javascript 随机调用函数时，如何确保至少一个元素的可见性？

Question

我有一个函数可以通过其 id 随机 select 一个 html 元素的可见性。我在一个元素上两次调用该函数，因此看起来这两个元素都是不可见的。我想避免同时显示 none。我已经尝试过使用单独的函数并修改我的随机函数。这是我的代码：

function turn_visible(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'hidden') e.style.display = 'block';
    else e.style.display = 'block';
}

function in_visible(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'block') e.style.display = 'none';
    else e.style.display = 'none';
}

function random_vis(id, id) {
    var func = randomFrom([turn_visible, in_visible]);
    (func)(id);
}

function randomFrom(array) {
    return array[Math.floor(Math.random() * array.length)];
}

以下是我尝试检查可见性的方法：

function check_visible(id1, id2) {
    var e1 = document.getElementById(id1);
    var e2 = document.getElementById(id2);
    if ((e1.style.display == 'hidden'), (e2.style.display == 'hidden')) {
        var func = randomFrom([turn_visible(id1), in_visible(id2)]);
        (func)(id1, id2);
    }
}

这是我在 html 标记中使用函数的方式：

<a href="#page1" onclick="random_vis('rap-1812-1'); 
                          random_vis('rap-1857-1');
                          check_visible('rap-1812-1','rap-1857-1')">
</a>

Answer 1

var invisibleId = ""; // both are visible!

function in_visible(id) {
  // Check if one is already invisible and turn on, if not the same as id
  if (invisibleId != id && invisibleId !== "") {
    turn_visible(invisibleId);
  }
  invisibleId = id;
  ...
}

Answer 2

以下代码在 Chrome 和 Firefox

上运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>   </title>

</head>
<body>
    <div id="rap-1812-1" style="display : block;">This is div rap-1812-1</div>
    <br>
    <div id="rap-1857-1" style="display : block;">This is div rap-1857-1</div>
    <br>
    <a href="#page1" onclick="random_vis('rap-1812-1'); 
                      random_vis('rap-1857-1');
                      check_visible('rap-1812-1','rap-1857-1')">
                      Click Here!
    </a>

</body>
     <script>
         function turn_visible(id) {
            var e = document.getElementById(id);
             if (e.style.display == 'none') e.style.display = 'block';
        }

        function in_visible(id) {
            var e = document.getElementById(id);
             if (e.style.display == 'block') e.style.display = 'none';
        }

        function random_vis(id) {
             var func = randomFrom([turn_visible, in_visible]);
            (func)(id);
        }

        function randomFrom(array) {
            return array[Math.floor(Math.random() * array.length)];
        }

        function check_visible(id1, id2) {
            var e1 = document.getElementById(id1);
            var e2 = document.getElementById(id2);
             if ((e1.style.display == 'none') && (e2.style.display == 'none')) {
                var toShow = Math.floor(Math.random() * 2);
                turn_visible(arguments[toShow]);
            }
        }

    </script>
</html>

使用 javascript 随机调用函数时，如何确保至少一个元素的可见性？

How do I assure the visibility of at least one element when randomly calling a function with javascript?

html

javascript

css

random

visibility