在選擇框中使用 Jquery

Question

這是我的 HTML 的一部分。 這部分將轉換為小尺寸的選擇框，每個li組成一個組，通過單擊組中的每個li成員將顯示，我為此使用了 CSS 過濾器。 我的問題是如何通過單擊選擇框中的每個li來重新排列成員

        <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 取決於排列

Answer 1

@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>

代碼：

.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();   
        }

    }); 
});

希望它會幫助你。 :)