单击元素后选择与特定类的下一个元素

HTML看起来像（可扩展文本类的内部跨度通过JS生成）单击元素后选择与特定类的下一个元素

<span class="expandable-text"> 
    <span class="more">read more</span> 
    <span class="details">blablabla</span> 
</span>

当前的jQuery：

$('.expandable-text').on('click', '.more', function() {  
    setTimeout(function() { 
     // bad as it selects all elements with that class... 
     // $('.details').css('display', 'inline'); 
     $(this).next('span').css('display', 'inline'); 
    }, 50); 
});

也试过$(this).parent().find('.details').css('display', 'inline');

我该如何选择details类的元素，就在我刚刚单击的元素旁边？

编辑：动态生成expandable-text中的两个span元素。小提琴：http://jsfiddle.net/NTP9y/2/

来源

2014-05-05 Dan P.

你.next('span')是正确的 - 如果你知道每个.more必然后跟一个span.details那么你能省略的说法，只是做.next()，但没有区别，如果你不这样做。

代码中的问题是this在超时回调中没有正确的范围。

的解决方法是调用$(this)并将其分配给一个变量的setTimeout()之外，则通过该变量为超时功能：

$('.expandable-text').on('click', '.more', function() { 
    var details = $(this).next('span'); 
    setTimeout(function() { 
     details.css('display', 'inline'); 
    }, 50); 
});

来源

2014-05-05 03:00:39 BoltClock

嗨，感谢您的帮助。我省略了这些跨度是动态生成的，请检查http://jsfiddle.net/sfarsaci/NTP9y/ –

@Dany P：看起来你只是使用别人提供的不对应的小提琴你有什么以任何方式。除此之外，使用'.next（）'应该和我在我的回答中所说的一样。 – BoltClock

它和我的文章一样，只是元素可以动态生成。我们可以在小提琴上看到点击阅读更多内容不会触发细节元素上的内联显示。但是当元素直接在HTML代码中工作时。 –

有很多方法可以做到这一点，一个是$(this).siblings('.details').css(...)喜欢这里http://jsfiddle.net/sfarsaci/NTP9y/

来源

2014-05-05 03:02:08

请检查http://jsfiddle.net/sfarsaci/NTP9y/，我省略说跨度是动态生成的。 –

http://jsfiddle.net/NTP9y/2/ * –

单击元素后选择与特定类的下一个元素

回答

相关问题