Jquery:从具有相同名称的多个类中选择一个类?

时间:2012-09-07 22:19:18

标签: jquery jquery-selectors

我需要从列表格式中单击的父元素中选择一个类。一直阻止具有相同类名的其他类显示。

所以,例如:

$('ul').click(function() {
    $('li').next(".info").css({ "display" : "block" });
});

我将.info设置为display:none;

我的HTML代码是:

<ul>
    <li><span>Guy</span></li>
    <li class="info">
        <p>This should pop up when I click on the "Guy" span.</p>
    </li>
</ul>

虽然,我似乎无法弄清楚为什么它不起作用/开火。

非常感谢任何帮助。

2 个答案:

答案 0 :(得分:2)

你基本上是针对错误的元素。只需使用:

$('ul li').click(
    function(){
        $(this).next('li.info').show();
    });

JS Fiddle demo

在原始代码$(this)中,点击了ulclick个事件从点击的lispan到{{{ 1}}),然后查找的类名为ul的{​​{1}}的下一个兄弟。

我的修正案的工作原理是让ul事件的目标为info,其中 获得了click类的兄弟元素。< / p>

顺便说一句,在jQuery无法正常工作的情况下,只需检查您的选择器是否匹配您认为应该匹配的内容,li会很有帮助。

答案 1 :(得分:0)

您可以将事件绑定到 span 元素。

$(document).ready(function(){
    $('ul span').click(function() {
        // $('.info').hide()
        $(this).parent().next().show();
    });
})

http://jsfiddle.net/2mvdt/