javascript - 如何使随机选择器只选择显示的项目？

Question

是的，我对 JQuery 不太熟悉，我正在尝试为我们的网络团队制作一个随机午餐选择器。

http://jsfiddle.net/vy8RL/1/

我想隐藏某些项目。例如，当您点击“Quick Eats”按钮时，它仅显示 4 个选项，而当您点击“EAT ME”时，它仍然会选择隐藏的 LI。有没有办法让它只选择可见的选项？

$(document).ready(function() {

  $("#button").click(function(){
    random();
  });
      $("#unhealthy-food").click(function(){
      $(".unhealthy").hide();
    });
      $("#all").click(function(){
      $("li").show();
    });
       $("#fast-food").click(function(){
      $(".food").hide();
      $(".fast").show();
    });

});


function random() {
        $("li.selected").removeClass("selected");
        var menuItems = $("ul#list li");
        var numItems = menuItems.length;
        if(window.sessionStorage && window.sessionStorage.getItem("selected")) {
            previous = Number(window.sessionStorage.getItem("selected"));
        } else {
            previous = -1;             
        }
        var selected = Math.floor(Math.random()*numItems);
        while(selected === previous && numItems > 1) {
            selected = Math.floor(Math.random()*numItems);
        }
        if(window.sessionStorage)  window.sessionStorage.setItem("selected", selected);
        $("ul#list li:nth-child("+(selected+1)+")").addClass("selected");  
}

Answer 1

您可以使用:visible选择器:

function random() {
    $("li.selected").removeClass("selected");
    var menuItems = $("#list li").filter(':visible');
    var numItems = menuItems.length;
    // ...
    menuItems.eq(selected).addClass("selected");  
}

请注意，我已将 $("ul#list li:nth-child("+(selected+1)+")") 替换为缓存的集合 + eq () 方法。

http://jsfiddle.net/3n9ex/