javascript - jquery 动态元素滚动

Question

我有一个情况，我需要多个向左/向右滚动事件，通常我使用类似的东西:

<div class="arrow_left" onclick="/* move_left() */">&lt;</div>
<div id="some_container" class="somecontainer">
<div class="item_container" id="item_container">
<span>item 1</span>
<span>item 2</span>
<span>item 3</span>
</div>
</div>
</div>

在我的 jquery 中:

function move_right() {
var leftPos = $('#item_container').scrollLeft();
if (leftPos < 1500) {
$('#item_container').animate({scrollLeft: leftPos + 150});
}
}

但在这种情况下，我使用 php foreach 使用 some_container 的多个实例，并且我不想在 jquery 中手动定义每个选择器。

有没有办法可以在不使用花哨的插件的情况下解决这个问题？

谢谢最大

Answer 1

制作了一个 jsFiddle 以获得更好的解释:https://jsfiddle.net/Lpcbq0ko/

<div class="group">
  <div class="arrow_left" onclick="/* move_left() */">&lt;</div>
  <div class="arrow_right">&gt;</div>
  <div id="some_container" class="somecontainer">
    <div class="item_container" id="item_container">
      <span>item 1</span>
      <span>item 2</span>
      <span>item 3</span>
  </div>
  </div>
</div>
<div class="group">
  <div class="arrow_left" onclick="/* move_left() */">&lt;</div>
  <div class="arrow_right">&gt;</div>
  <div id="some_container" class="somecontainer">
    <div class="item_container" id="item_container">
      <span>item 1</span>
      <span>item 2</span>
      <span>item 3</span>
  </div>
  </div>
</div>

$('.group .arrow_right').click(function() {
    $(this).next('.somecontainer').html('update');
  $(this).next('.somecontainer').animate({scrollRight: 150});
});

您可以将所有内容包装在一个 div 中，以分隔控件。然后您将可以单独访问每个容器。在此示例中，我将更新整个 HTML，但是，当然，您可以做任何您想做的事情。