Question

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

我想要隐藏某些项目。例如，当您点击＆＃34; Quick Eats＆＃34;按钮它只显示4个选项，当你点击＆＃34; EAT ME＆＃34;它仍然会选择隐藏的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/

Answer 2

你去吧。我刚刚添加了菜单偏好的跟踪。还在第9行添加了$(".food").show();来更正错误。

$(document).ready(function() {

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

});


function random(user_choice) {
    $("li.selected").removeClass("selected");
    var menuItems = $(user_choice);
    console.log(menuItems);
    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);
    $(menuItems[selected]).addClass("selected");
}

http://jsfiddle.net/vy8RL/19/

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

2 个答案: