Question

我需要你的帮助。

我点击时尝试获得正确的选择器，但问题在于显示所有父级的div。

<div class="item">
    <a href="">element1</a> <span>span1</span> <br>
    <a href="">element10</a> <span>span10</span> <br>
</div>

<div class="item">
    <a href="">element2</a> <span>span2</span><br>
    <a href="">element20</a> <span>span20</span><br>
</div>

<div class="item">
    <a href="">element3</a> <span>span3</span><br>
    <a href="">element30</a> <span>span30</span><br>
</div>

<div class="item">
    <a href="">element4</a> <span>span4</span><br>
    <a href="">element40</a> <span>span40</span><br>
</div>

JS代码：

$('.item span').hide();

$('.item a').click(function(){

    // hide all span
    var $this = $(this).parent().find('span');
    $(".item span").not($this).hide();

    // here is what I want to do
    $this.toggle();

});

示例： http://jsfiddle.net/BGSyS/637/

我想，当我点击＆＃34; Element10＆＃34;时，只有span10显示而不是span1 你能帮助我吗？感谢。

Answer 1

在此背景下尝试使用.next()来简化您的工作，

var items = $('.item span').hide();
$('.item a').click(function(e){
    e.preventDefault();
    items.not($(this).next('span').toggle()).hide();
});

DEMO

Answer 2

试试这个：

$('.item span').hide();

$('.item a').click(function(e){
    e.preventDefault();
    $('.item span').hide();
    $(this).next('span').toggle();    
});

我如何在Click上获得正确的选择器？

2 个答案:

DEMO