如何 hide/show 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 得到 hidden/shown 但数据过滤器一旦被隐藏就无法工作..

<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 属性中获取您要过滤的 class，然后

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

仅显示与 class.

匹配的列表项

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

如何 hide/show div 进行数据过滤

how to hide/show div with data filtering

html

hide

show