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

问题描述：

标题可能有点混乱，基本上我想写一个脚本，它将从下拉窗体中抓取选定的值，并隐藏li的类不包含从下拉式窗体中的值..如果这是有道理的？每个L1有多个类..如果对象类不包含值，jquery隐藏对象

这里就是我有这么远（抱歉，如果这是原油）：

FORM：

<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，但不知道如何扭转它..如果这是有道理的？任何帮助，将不胜感激:)

答

你可以使用.not()和传递类，像这样：

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

感谢尼克，我已经成功地使用：在我的脚本不能选择和得到它的工作，但由于某种原因我不能让你的脚本工作？它只是隐藏一切，不知道为什么：S – SoulieBaby 2010-08-31 01:52:40

$（“＃portfolio li”）。not（“。”+ value）.hide（）;是我使用的代码，我有散列注释，它工作正常，我的代码只是可怕的凌乱lol – SoulieBaby 2010-08-31 01:53:37

@SoulieBaby - 初始选择器缺少一个'选择'结束...更新为一个更紧凑的版本尽管如此，请给它一个去，而不是我现在可以测试的地方，为此道歉。 – 2010-08-31 01:53:40

答

$("#filter-submit").click(function() 
{ 
    var Portfolio = $("#portfolio"); 
    $('li',Portfolio).show(); 

    $("#filter selectb :selected").each(function(i){ 
     Class = $(this).attr('value'); 
     $('li',Portfolio).not('.' + Class).get().hide(); 
    }); 
    return false; 
});

给一个去！

选择器'select：selected'不会找到任何东西......它需要一个空间，例如： 'select：selected' :) – 2010-08-31 01:55:01

答

只是想我会把这一个扔在那里的乐趣。采取了一些不同的方法来隐藏<li>元素。这一切都在一个选择器中。

$("#filter-submit").click(function() { 
    var value = $('#filter select').map(function() { 
     return ($(this).val() || null); 
    }).get().join('):not(.'); 

    if(value) $('#portfolio li:not(.' + value + ')').hide();// Only filter if at 
});               // least one selected

的value变量将举行一个String是这样的：

"bed-1):not(.bath-1):not(.frontage-100"

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

相关推荐