使用jQuery实现目标动态HTML

我正在研究一个WordPress主题，并使用JS根据切换的类别项进行实时过滤。类别链接刚刚从wp_list_categories();创建并与WP_Query();使用jQuery实现目标动态HTML

目前，我有独特的帖子的ID集的JS使这项工作，但有其他人使用的主题产生的邮册，我不想他们必须在每次添加新类别时编辑JS。基本上，我想要有JS功能和过滤器帖子，无论添加了多少类别。

我当前的标记就是这样的：

<section id="sidebar"> 
    <ul> 
     <li class="cat-item cat-item-1"></li> 
     <li class="cat-item cat-item-2"></li> 
     <li class="cat-item cat-item-3"></li> 
    </ul> 
</section> 

<section id="postlist"> 
    <div class="1post apost"></div> 
    <div class="2post apost"></div> 
    <div class="3post apost"></div> 
</section>

而我的JS如下：

$(".cat-item-1").click(function() { 
    $('.1post').toggle('slow'); 
}); 

$(".cat-item-2").click(function() { 
    $('.2post').toggle('slow'); 
}); 

$(".cat-item-3").click(function() { 
    $('.3post').toggle('slow'); 
});

这工作得很好，当我每一次明确地键入了每个类别和职位ID，但我试图完成这样的事情：

$(".cat-item-" + (dynamic cat ID)).click(function() { 
    $("." + (dynamic post ID that matches cat ID) + "post").toggle('slow'); 
});

这是可能的吗？我不是世界上最有经验的人，当谈到JS时，我很抱歉，如果解决方案正在盯着我！我在这里添加了这个小提琴：http://jsfiddle.net/davemcnally/5QZcw/ - 提前致谢！

来源

2012-09-29 Dave McNally

我猜是这样的[FIDDLE]（http://jsfiddle.net/ 5QZcw/1 /）会这样做吗？ – adeneo

在我的解决办法看看：http://jsfiddle.net/EP96x/

$('.cat-item').click(function() { 
    $('.apost').eq($(this).index()).toggle(); 
});

cat-item你点击（第一，第二等...）它计算该元素具有类，然后切换相应的元素与类apost。

编辑：正如评论中指出的那样，存在某些元素失序的风险。如果是这样的情况下我们需要以配合适当的元素链接使用正则表达式：

http://jsfiddle.net/HKkq5/

$('.cat-item').click(function() { 
    var num = $(this).attr('class').match(/cat-item-(\d+)/)[1]; 
    $('.' + num + 'post').toggle(); 
});

来源

2012-09-29 14:53:42

这并不是一个坏主意，但如果出于某种原因任何侧边栏或后期元素出现故障，它将会失败。我仍然会竖起大拇指。 – adeneo

@adeneo如果由于某种原因它们出现故障，这将是不可能的（没有类名的正则表达式）来匹配哪个链接应该切换哪个元素。因此，额外的标记/类/ id将是必要的。 –

@adeneo我更新了我的答案。 –

使用jQuery实现目标动态HTML

回答

相关问题