在選擇框中使用jquery

-1

這是我的HTML的一部分。此部分將轉換爲小尺寸的選擇框每個li組成一個組，通過點擊每個組的li成員將顯示，我用CSS過濾器爲此。我的問題是如何通過選擇框在選擇框中使用jquery

 <ul class="nav nav-pills"> 
      <li class="filter" data-filter="all"> 
       <a href="#noAction">evey item</a> 
      </li> 
      <li class="filter" data-filter="web"> 
       <a href="#noAction">web</a> 
      </li> 
      <li class="filter" data-filter="photo"> 
       <a href="#noAction">photo</a> 
      </li> 
      <li class="filter" data-filter="identity"> 
       <a href="#noAction">identity</a> 
      </li> 
      <li class="filter" data-filter="news"> 
       <a href="#noAction">news</a> 
      </li> 
     </ul>

https://jsfiddle.net/amirhsh/0xtntxo6/ 點擊每個li在選擇框中選擇立項目之後重新排列成員是否取決於安排

來源

2015-07-06 Amir Amiri

你的HTML在哪裏？ –

你可以添加html或添加小提琴嗎？ –

小提琴和提供廣泛的投入總是一個好主意，所以你不會得到所有這些downvotes。 – Skatch

@amir，試試下面的代碼：

HTML代碼：

<ul class="nav nav-pills"> 
     <li class="filter" data-filter="all"> 
      <a href="#noAction">evey item</a> 
     </li> 
     <li class="filter" data-filter="web"> 
      <a href="#noAction">web</a> 
     </li> 
     <li class="filter" data-filter="photo"> 
      <a href="#noAction">photo</a> 
     </li> 
     <li class="filter" data-filter="identity"> 
      <a href="#noAction">identity</a> 
     </li> 
     <li class="filter" data-filter="news"> 
      <a href="#noAction">news</a> 
     </li> 
    </ul> 


<div class="all web hide" > <p> some web contents </p> </div> 
<div class="all news hide" > <p> some news contents </p> </div> 
<div class="all photo hide" > <p> some photo contents </p> </div> 
<div class="all news hide" > <p> some news contents </p> </div> 
<div class="all photo hide " > <p> some photo contents </p> </div> 
<div class="all web hide " > <p> some web contents </p> </div> 
<div class="all identity hide" > <p> some identity contents </p> 
<div class="all web hide" > <p> some web contents </p> </div> 
<div class="all identity hide" > <p> some identity contents </p> 
<div class="all news hide" > <p> some news contents </p> </div> 
<div class="all identity hide" > <p> some identity contents </p> 
<div class="all web hide" > <p> some web contents </p> </div>

CSS代碼：

.hide { display: none; }

JS代碼：

$("li").click(function(){ 
    $("div").hide(); 
    var filter = $(this).data('filter'); 
    alert(filter); 

    $("div").each(function(){ 
     if($(this).hasClass(filter)) { 
      $(this).show(); 
     } 

    }); 
});

希望它會幫助你。 :)

來源

2015-07-06 11:26:14 SHAZ

非常感謝你 –

它並沒有完全幫助，但給了我一個線索！ –

在選擇框中使用jquery

回答

相關問題