Question

我在网站中多次使用此结构，两个按钮分别称为leftArrow和rightArrow（同名）

<div class="row">
  <ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
  </ul>
  <div class="col-12 text-right">
    <button name="leftArrow" class="btn btn-primary" type="button"><</button>
    <button name="rightArrow" class="btn btn-primary" type="button">></button>
  </div>
</div>

单击它会滚动父ul，这是我的代码：

$('button[name="leftArrow"]').click(function () {
    var mainSlider = $('button[name="leftArrow"]').parent().prev();
    var leftPos = mainSlider.scrollLeft();
    mainSlider.animate({
        scrollLeft: leftPos - 600
    }, 300);
});

$('button[name="rightArrow"]').click(function () {
    var mainSlider = $('button[name="rightArrow"]').parent().prev();
    var leftPos = mainSlider.scrollLeft();
    mainSlider.animate({
        scrollLeft: leftPos + 600
    }, 300);
});

这很好用，我的问题是所有ul都滚动了，而不是只有唯一的滚动了。

任何解决方案仅引用包含被单击按钮的ul而不是全部ul的解决方案？

Answer 1

更改

var mainSlider = $('button[name="rightArrow"]').parent().prev();

到

var mainSlider = $(this).parent().prev();

您已经在click事件上引用了相应的箭头。您正在做的是当前选择所有向右箭头

如何在单击时引用一个对象，而不是所有具有相同名称的对象

1 个答案: