如何通过按钮选择随机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 defaultMenu = null;
$('.random').click(function(e) { 
    var random_menu_cover = Math.floor(Math.random() * $('.menu_cover').length);
    defaultMenu && defaultMenu.hide();
    defaultMenu = $('.menu_cover').eq(random_menu_cover);
});

然后在菜单按钮中选中defaultMenu已设置，如果是，则将其切换为

$(".somebutton").click(function(){
   defaultMenu && defaultMenu.toggle();
});

演示

＆＃13;

＆＃13;

var defaultMenu = null;
$('.random').click(function(e) {
  var random_menu_cover = Math.floor(Math.random() * $('.menu_cover').length);
  //Hide the old one, if one
  defaultMenu && defaultMenu.hide();
  defaultMenu = $('.menu_cover').eq(random_menu_cover);
});

$(".fa-menu").click(function() {
  defaultMenu && defaultMenu.toggle();
});

＆＃13;

.menu_cover {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="random">Random</p>

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要保存所选菜单并使用它来隐藏/显示代码，例如：

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

  $currentMenu = $menus.eq(random_menu_cover);
  $menus.hide();
  $currentMenu.show();
});

$currentMenu.on('click', hideShowFunction);

Answer 3

您可以使用以下方式访问所有菜单：

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

然后您可以随机选择其中一个菜单：

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

从这里开始，您可以组合一个功能，选择一个菜单随机显示 - 以及（可选）（如下例所示），确保随机选择哪个菜单，不是与上次随机选择的菜单相同。

示例：

＆＃13;

＆＃13;

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);

＆＃13;

.visible {
display: block;
}

.invisible {
display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;