0

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

我在一个页面上显示一个 wordpress 文章摘录列表，每个都在它自己的 DIV 中。我将帖子标签输出到 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>

ETC

这可以用jquery完成吗？

4

2 回答 2

0

是的，这可以通过 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 来执行此操作。

于 2013-05-28T06:36:47.377 回答
0

这是给你的一个例子 -

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/

希望对你有帮助 ：）

于 2013-05-28T06:47:40.053 回答