如何使用数据过滤隐藏/显示div

Question

<script>
function changeContent(str)
{
    if(str == 'recent' || str == 'old' && !($(".main_content").is(':visible')))
    {
        $(".main_content").show();
    }
    else if( str == 'newComment') {
        $(".main_content").hide();
    }
}
</script>

使用onclick函数的列表选项为"changeContent()“，其中id为参数。

<main class="cd-main-content">
        <div class="cd-tab-filter-wrapper">
            <div class="cd-tab-filter">
                <ul class="cd-filters">
                    <li class="placeholder"> 
                        <a data-type="all" href="#0">All</a> <!-- selected option on mobile -->
                    </li> 
                    <!-- <li class="filter"><a class="selected" href="#0" data-type="all">All</a></li> -->
                    <li class="filter" data-filter=".color-1"><a href="#0" id="recent" data-type="color-1" onclick="changeContent(this.id)">Recent to Old</a></li>
                    <li class="filter" data-filter=".color-2"><a href="#0" id="old" data-type="color-2" onclick="changeContent(this.id)">Old to Recent</a></li>
                    <li class="filter" ><a href="#0" id="newComment" data-type="color-3" onclick="changeContent(this.id)">New Comment</a></li>
                </ul> <!-- cd-filters -->
            </div> <!-- cd-tab-filter -->
        </div> <!-- cd-tab-filter-wrapper -->

应该隐藏和显示的主div (连同数据过滤器)，div正在隐藏/显示，但是数据过滤器一旦被隐藏就不能工作。

<div class="main_content">
        <section class="cd-gallery">
            <ul>
                <li class="mix color-1 check1 radio2 option3"><img src="img/img-1.jpg" alt="Image 1"></li>
                <li class="mix color-2 check2 radio2 option2"><img src="img/img-2.jpg" alt="Image 2"></li>
                <li class="mix color-1 check3 radio3 option1"><img src="img/img-3.jpg" alt="Image 3"></li>
                <li class="mix color-1 check3 radio2 option4"><img src="img/img-4.jpg" alt="Image 4"></li>
                <li class="mix color-1 check1 radio3 option2"><img src="img/img-5.jpg" alt="Image 5"></li>
                <li class="mix color-2 check2 radio3 option3"><img src="img/img-6.jpg" alt="Image 6"></li>
                <li class="mix color-2 check2 radio2 option1"><img src="img/img-7.jpg" alt="Image 7"></li>
                <li class="mix color-1 check1 radio3 option4"><img src="img/img-8.jpg" alt="Image 8"></li>
                <li class="mix color-2 check1 radio2 option3"><img src="img/img-9.jpg" alt="Image 9"></li>
                <li class="mix color-1 check3 radio2 option4"><img src="img/img-10.jpg" alt="Image 10"></li>
                <li class="mix color-1 check3 radio3 option2"><img src="img/img-11.jpg" alt="Image 11"></li>
                <li class="mix color-2 check1 radio3 option1"><img src="img/img-12.jpg" alt="Image 12"></li>
                <li class="gap"></li>
                <li class="gap"></li>
                <li class="gap"></li>
            </ul>
            <div class="cd-fail-message">No results found</div>
        </section> <!-- cd-gallery -->
        </div>
        <!-- <div class="new_content" style="display:none">
        </div> -->

Answer 1

仅仅添加像data-filter这样的属性是不够的。你必须以某种方式实现过滤。

例如，您可以在您已经拥有的changeContent函数中这样做。

你可以：

var filter = "."+$("#"+str).attr("data-type");

从锚标记中的data-type属性中获取要筛选的类，然后

$(".main_content ul li"+filter).show();

只显示与类匹配的列表项。

示例：http://jsfiddle.net/70hg59ua/2/