在选择框中使用 Jquery

Question

这是我的 HTML 的一部分。这部分将转换为小尺寸的 select 框每 li 个创建一个组，通过单击每个 li 个组成员将显示，我为此使用了 CSS 过滤器。我的问题是如何通过单击 selectbox

中的每个 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/ 在 selecting select box li 中的项目之后 arrange

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>

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

    }); 
});

希望对您有所帮助。 :)

在选择框中使用 Jquery

using Jquery in selectbox

jquery

html

css

jquery-selectbox