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/ 在选择框中选择项目后，依赖于安排

Answer 1

@amir，请尝试以下代码：

HTML CODE：

<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 CODE：

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

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

    }); 
});

希望它会对你有所帮助。：）

在selectbox中使用Jquery

1 个答案: