Question

无法让.next（）选择器工作。认为这很简单，但我正在清理做错事。

这是脚本（不工作）：

$('.ITEM').hover(function (){
    $(this).next('.ITEM_LINE').toggleClass('ITEM_LINE_ON');
    setTimeout(function() {$(this).next('.midline').toggleClass('educ_color')}, 200);
});

和它基于的HTML：

<div class="timeline">
    <div class="segment" style="height:30px">
        <div class="educ">
            <div class="ITEM" >
                <p>High School</p>
                <div class="ITEM_LINE educ_color"></div>
            </div>
        </div>
        <div class="center">
            <div class="midline"></div>
        </div>
    </div>

        ..(repeats)...

</div>

这个想法是这些元素会被重复多次，所以我只想让jquery脚本影响当前的那个元素。我猜测'.midline'div可能需要另一种方法，但至少应该使用'.ITEM_LINE'。

谢谢！

Answer 1

你需要使用.find()，因为你正在寻找一个后代元素，而不是下一个兄弟元素

$(this).find('.ITEM_LINE').toggleClass('ITEM_LINE_ON');

你也遇到setTimeout()方法的问题，处理程序里面的this不再引用hovered元素，你可以用一个闭包变量来解决它

$('.ITEM').hover(function () {
    var $this = $(this);
    $this.next('.ITEM_LINE').toggleClass('ITEM_LINE_ON');
    setTimeout(function () {
        $this.closest('.segment').find('.midline').toggleClass('educ_color')
    }, 200);
});

jquery（this）.next（）语句不起作用...语法问题？

1 个答案: