如何通过数据过滤隐藏/显示 div答案

【问题标题】：how to hide/show div with data filtering如何通过数据过滤隐藏/显示 div
【发布时间】：2015-03-25 17:43:28
【问题描述】：

<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功能的列表选项以id为参数“changeContent()”..

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

【问题讨论】：

控制台有错误吗？
jsfiddle.net/70hg59ua 显示/隐藏部分似乎在工作，除了“全部”链接，因为它没有绑定onclick 函数。您的预期结果是什么？
@icke no.. 没有任何错误:)
@icke 基本上，当我单击“新评论”时，应该隐藏 div 并且它工作完美。现在，当我单击“从最近到旧”或“从旧到最近”时，会出现 div，但内容没有被过滤。
好吧，你没有实现任何过滤器。您是否在问如何实现按日期对 CD 列表进行过滤/排序？

标签： html hide show

【解决方案1】：

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

例如，您可以在已有的 changeContent 函数中执行此操作。

你可以：

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

从锚标签中的data-type 属性中获取要过滤的类，然后

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

仅显示与该类匹配的列表项。

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

【讨论】：