Question

对Jquery来说很新，并想知道是否有人可以帮我解决以下问题：

使用Textpattern我有一个生成的列表;

<li class="archive-month"><a href="#" id="May2011">May</a></li>
<li class="May2011"><a rel="bookmark" href="http://***">Post Number One</a></li>
<li class="May2011"><a rel="bookmark" href="http://***">Post Number Two</a></li>
<li class="May2011"><a rel="bookmark" href="http://***">Post Number One</a></li>    
<li class="archive-month"><a href="#" id="April2011">April</a></li>

ad无限。

我的问题是，如何使用<a>标签显示和隐藏列表项，其中包含与标记ID匹配的类？例如，点击ID为“May2011”的a，切换隐藏并显示所有li的匹配类“May2011”，依此类推各个月。

提前感谢您的帮助。

Answer 1

你可以尝试：

$('a').click(
    function(){
        var elemClass = this.id;
        $('li.' + elemClass).toggle();
        return false; // assuming you don't want to follow the link.
    });

参考文献：

click()。
toggle()。

Answer 2

提出应比@David's answer更有效的替代解决方案：

$('li.archive-month > a').live('click', function()
{
    $(this).parent().nextUntil('.archive-month').toggle();
    return false;
});

如果所有.delegate()共享一个共同的祖先 - 或许.live()，则使用<li>代替<ul>甚至可以做得更好。

$('#some-common-ancestor').delegate('li.archive-month > a', 'click', function()
{
    $(this).parent().nextUntil('.archive-month').toggle();
    return false;
});

N.B。这根本不使用元素ID。相反，它依赖于HTML结构与OP中的内容一致 - 即单击链接时应该切换的<li>是链接父级的下一个兄弟，最多但不包括下一个li，其中包含课程archive-month。

根据匹配的ID和类来定位/隐藏元素

2 个答案: