如果对象类不包含值，jquery 隐藏对象

Question

标题可能有点令人困惑，基本上我正在尝试编写一个脚本，该脚本将从下拉表单中获取选定的值，并隐藏 li 的类(如果其类不包含下拉表单中的值)。 .如果这有道理的话？每个li有多个类..

这是我到目前为止所得到的(抱歉，如果它很粗糙):

表格:

<form action="" name="filter" id="filter" method="post">
        <select name="bedrooms">
          <option value="">- Select Bedrooms -</option>
          <option value="bed-1">1</option>
          <option value="bed-2">2</option>
          <option value="bed-3">3</option>
          <option value="bed-4">4</option>
          <option value="bed-5">5</option>
        </select>
        <select name="bathrooms">
          <option value="">- Select Bathrooms -</option>
          <option value="bath-1">1</option>
          <option value="bath-2">2</option>
          <option value="bath-3">3</option>
          <option value="bath-4">4</option>
          <option value="bath-5">5</option>
        </select>
        <select name="frontage">
          <option value="">- Select Frontage Size -</option>
          <option value="frontage-100">100</option>
          <option value="frontage-200">200</option>
          <option value="frontage-300">300</option>
          <option value="frontage-400">400</option>
          <option value="frontage-500">500</option>
        </select>
        <input type="submit" name="filter-submit" id="filter-submit" value="Go" />
      </form>

JQuery:

$("#filter-submit").click(function() {

          var foo = [];
          $("#filter :selected").each(function(i, value){
            foo[i] = $(value).val();
          });
          if (foo) {
            $.each(foo, function(index, value){
              if (value) {
                //hide other objects based on "value"
                //$("#portfolio li").hasClass();
            };
            });
          };

        return false;
        });

好吧，我陷入困境的是如何隐藏所有没有输出为“值”的类的“#portfolio li”。我想我可以使用 hasClass 但不知道如何扭转它..如果这有意义吗？任何帮助将不胜感激:)

Answer 1

您可以使用.not()并通过该类(class)，如下所示:

$("#filter-submit").click(function() {
  var lis = $("#portfolio li");          //get all of the <li> elements
  $("#filter select").each(function() {  //loop through selected classes
    var val = $(this).val();             //get selected value, could be blank
    if(val) lis = lis.not('.' + val);    //get only <li>s without the class
  });
  lis.hide();                            //hide the ones without all classes
  return false;                          //prevent default behavior
});