2010-08-31 50 views
2

標題可能有點混亂,基本上我想寫一個腳本,它將從下拉窗體中抓取選定的值,並隱藏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,但不知道如何扭轉它..如果這是有道理的?任何幫助,將不勝感激:)

回答

2

你可以使用.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 
}); 
+0

感謝尼克,我已經成功地使用:在我的腳本不能選擇和得到它的工作,但由於某種原因我不能讓你的腳本工作?它只是隱藏一切,不知道爲什麼:S – SoulieBaby 2010-08-31 01:52:40

+0

$(「#portfolio li」)。not(「。」+ value).hide();是我使用的代碼,我有散列註釋,它工作正常,我的代碼只是可怕的凌亂lol – SoulieBaby 2010-08-31 01:53:37

+0

@SoulieBaby - 初始選擇器缺少一個'選擇'結束...更新爲一個更緊湊的版本儘管如此,請給它一個去,而不是我現在可以測試的地方,爲此道歉。 – 2010-08-31 01:53:40

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

給一個去!

+0

選擇器'select:selected'不會找到任何東西......它需要一個空間,例如: 'select:selected' :) – 2010-08-31 01:55:01

1

只是想我會把這一個扔在那裏的樂趣。採取了一些不同的方法來隱藏<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"