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

Answer 1

您的.next('span')是正确的 - 如果您知道每个.more必然后跟span.details，那么您可以省略该参数，只需执行{{} 1}}，但如果你不这样做没有区别。

代码中的问题是.next()在超时回调中没有正确确定范围。

解决方法是调用this并将其分配给$(this)之外的变量，然后将该变量传递给超时函数：

setTimeout()

Answer 2

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

一样

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

2 个答案: