Question

我已经对该网站进行了搜索，但没有找到解决方案，因此希望获得以下指导：

我在页面上显示一个wordpress帖子摘录列表，每个列表都在自己的DIV中。我将post标签输出到DIV类。

我想要实现的是基于DIV类的自定义过滤器。在最初打开页面时，将显示所有DIV。然后onclick只有所需类的DIVS保持可见。这稍微复杂一些，因为大多数DIVS将在其类中包含多个WP标记。

html的一个例子可能是：

<a href="[command to show all DIVS]">All</a>
<a href="[command to show only class 'apple']">Apples</a>
<a href="[command to show only class 'mango']">Bananas</a>
<a href="[command to show only class 'orange']">Oranges</a>

<div class="apple orange">
<h3>Post 1 Title:</h3>
<p>Post excerpt</p>

<div class="apple">
<h3>Post 1 Title:</h3>
<p>Post excerpt</p>

<div class="mango orange">
<h3>Post 1 Title:</h3>
<p>Post excerpt</p>

等

这可以用jquery完成吗？

Answer 1

是的，这可以通过jQuery实现。

尝试做这样的事情 -

<a href="javascript:$('.tag').show();return false;">All</a><!-- Show all tag class -->
<a href="javascript:$('.tag').hide(); $('.apple').show();return false;">Apples</a><!-- Hide all tag class then show only apple class -->
<a href="javascript:$('.tag').hide(); $('.mango').show();return false;">Mango</a><!-- Hide all tag class then show only mango class -->
<a href="javascript:$('.tag').hide(); $('.orange').show();return false;">Oranges</a><!-- Hide all tag class then show only orange class -->

<div class="tag apple orange"><!-- Add tag class -->
    <h3>Post 1 Title:</h3>
    <p>Post excerpt</p>
</div>

<div class="tag apple"><!-- Add tag class -->
    <h3>Post 1 Title:</h3>
    <p>Post excerpt</p>
</div>

<div class="tag mango orange"><!-- Add tag class -->
    <h3>Post 1 Title:</h3>
    <p>Post excerpt</p>
</div>

是的，你需要jQuery才能做到这一点。

Answer 2

以下是您的示例 -

HTML

<ul>
    <li><a href="javascript:void(0)" rel="all">All</a></li>
    <li><a href="javascript:void(0)" rel="apple">Apple</a></li>
    <li><a href="javascript:void(0)" rel="mango">Mango</a></li>
    <li><a href="javascript:void(0)" rel="orange">Orange</a></li>
</ul>


<div class="grids">

    <div class="grid apple">apple</div>
    <div class="grid apple">apple</div>
    <div class="grid mango">mango</div>
    <div class="grid mango">mango</div>
    <div class="grid orange">orange</div>
    <div class="grid orange">orange</div>
    <div class="grid orange">orange</div>

</div>

和jquery

$('document').ready(function(){

    $('ul li a').click(function(){
        var data = $(this).attr('rel');
        if(data == 'all'){
            $('.grids .grid').show();
        }
        else {
            $('.grids .grid').hide();
            $('.grids .grid.'+data).show();
        }
        return false;
    });

});

查看实时演示 - http://jsfiddle.net/5kk3K/

希望这会对你有所帮助:)。

隐藏/显示多个DIV类切换| WP / jQuery的

2 个答案: