javascript - 以下 jQuery 不起作用。看一看

Question

代码:

<div>
    <a href="javascript:void(0)" class="back">Back</a>
    <div class="outer"></div>
    <a href="javascript:void(0)" class="next">Next</a>
</div>
<div>
    <a href="javascript:void(0)" class="back">Back</a>
    <div class="outer"></div>
    <a href="javascript:void(0)" class="next">Next</a>
</div>

jQuery 代码:

$('.next').click(function() {
    $('.next').prev().animate({
        scrollLeft: '+=150'
    }, 200);
});
$('.back').click(function() {
    $('.back').next().animate({
        scrollLeft: '-=150'
    }, 200);
});

错误:基本上我有更多与上面相同的类的代码，我想滚动被点击的代码。但是上面写的代码滚动页面上的所有“.outer”。每组代码在不同的div中。未提供可滚动的“外部”的内部 Material 。

Answer 1

您需要使用当前元素上下文执行代码，即 this。还要为父元素的兄弟元素设置动画，以便使用 $(this).closest('div') 向上遍历，然后使用 .prev() 或 next()

$(function() {
    $('.next').click(function() {
        $(this).closest('div').prev().animate({
            scrollLeft: '+=150'
        }, 200);
    });
    $('.back').click(function() {
        $(this).closest('div').next().animate({
            scrollLeft: '-=150'
        }, 200);
    });
});