javascript - 如何通过按钮随机选择一个div？

Question

我有一个菜单栏以及三个不同的隐藏菜单。当用户单击“随机按钮”时，会选择一个随机菜单并成为默认菜单。

这意味着如果用户单击菜单栏，则应打开默认菜单。

如果用户再次点击“随机按钮”，将选择一个新的随机菜单作为默认菜单。

下面的代码能够选择随机菜单。但是，如果用户单击菜单栏，所有隐藏菜单将同时显示，而不是默认菜单(点击“随机按钮”时随机选择)。

HTML:

<p class="random">Random</p>

<i class="fa fa-menu"></i> (This is the menu bar)

<nav class="menu_cover" style="display: none">Menu one</nav>
<nav class="menu_cover" style="display: none">Menu two</nav>
<nav class="menu_cover" style="display: none">Menu three</nav>

JavaScript:

$('.random').click(function(e) { 
    var random_menu_cover = Math.floor(Math.random() * $('.menu_cover').length);

    $('.menu_cover').hide().eq(random_menu_cover).show().css("display", "none");
});

jQuery 是一个简单的隐藏和显示代码。因此，单击菜单栏将同时“隐藏”和“显示”所有三个菜单。

如何修改此代码，以便菜单栏仅影响随机选择的默认菜单？

我希望这个问题有意义。

谢谢

Answer 1

您可以通过以下方式访问所有菜单:

var menuCovers = document.getElementsByClassName('menu_cover');

然后您可以通过以下方式随机选择其中一个菜单:

var randomNumber = Math.floor(Math.random() * menuCovers.length);

从这里，您可以组合一个函数，该函数选择要随机显示的菜单来显示 - 并且可选地(如下面的示例所示)确保随机选择的菜单不是与上次随机选择的菜单相同。

示例:

var random = document.getElementsByClassName('random')[0];
var menuCovers = document.getElementsByClassName('menu_cover');

function openRandomMenu() {

    for (var i = 0; i < menuCovers.length; i++) {

        if (menuCovers[i].classList.contains('visible')) {
        var skip = i;
        menuCovers[i].classList.remove('visible');
        menuCovers[i].classList.add('invisible');
        }
    }

    var randomNumber = skip;

    while (randomNumber === skip) {
        randomNumber = Math.floor(Math.random() * menuCovers.length);
    }
    
    menuCovers[randomNumber].classList.remove('invisible');
    menuCovers[randomNumber].classList.add('visible');
}

random.addEventListener('click',openRandomMenu,false);

.visible {
display: block;
}

.invisible {
display: none;
}

<p class="random">Random</p>

<i class="fa fa-menu"></i> (This is the menu bar)

<nav class="menu_cover invisible">Menu one</nav>
<nav class="menu_cover invisible">Menu two</nav>
<nav class="menu_cover invisible">Menu three</nav>