javascript - 单击某个元素后选择具有特定类的下一个元素

Question

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 元素都是动态生成的。 fiddle :http://jsfiddle.net/NTP9y/2/

Answer 1

您的 .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);
});