J'ai une barre de menus avec trois menus cachés différents. Lorsque l'utilisateur clique sur le "bouton aléatoire", un menu aléatoire est sélectionné et devient le menu par défaut.

Cela signifie que si l'utilisateur clique sur la barre de menus, le menu par défaut devrait s'ouvrir.

Si l'utilisateur frappe à nouveau sur le "bouton aléatoire", un nouveau menu aléatoire sera sélectionné par défaut.

Le code ci-dessous est capable de sélectionner un menu aléatoire. Cependant, si l'utilisateur clique sur la barre de menus, tous les menus cachés seront affichés en même temps plutôt que le menu par défaut (sélectionné au hasard en appuyant sur le "bouton aléatoire").

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

Le jQuery est un simple code de masquage et d'affichage. Par conséquent, cliquer sur la barre de menus "masquera" et "affichera" les trois menus en même temps.

Comment modifier ce code pour que la barre de menus affecte uniquement le menu par défaut qui a été sélectionné au hasard?

J'espère que cette question est logique.

Merci

1
user4061223 8 août 2016 à 01:46

3 réponses

Meilleure réponse

Vous pouvez accéder à tous les menus avec:

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

Vous pouvez ensuite sélectionner l'un de ces menus au hasard avec:

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

À partir de là, vous pouvez mettre en place une fonction qui sélectionne un menu à afficher au hasard à afficher - et, éventuellement, (comme le montre l'exemple ci-dessous), garantit que quel que soit le menu sélectionné au hasard, ce n'est pas le même comme menu sélectionné au hasard la dernière fois.

Exemple:

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>
0
Rounin 8 août 2016 à 09:24

Enregistrez une référence à l'élément de menu choisi au hasard ou donnez à l'élément une classe à laquelle le sélectionner en

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

Ensuite, dans votre bouton de menu, vérifiez simplement que defaultMenu est défini et si c'est le cas, basculez-le

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

Démo

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();
});
.menu_cover {
  display: none;
}
<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>
0
Patrick Evans 7 août 2016 à 23:04

Vous devez enregistrer le menu sélectionné et l'utiliser pour le cibler avec votre code masquer / afficher quelque chose comme:

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);
0
JustH 7 août 2016 à 23:04