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，但是，您当然可以做任何您想做的事情。

Answer 2

$('.arrow_left').click(function() {
    var newLeftPos = $(this).next().find('div').scrollLeft();
    console.log(newLeftPos);
    if(newLeftPos >10){
     $(this).next().find('div').animate({scrollLeft: - 150});
    }
    else{
        $(this).next().find('div').animate({scrollLeft: + 150});
    }
});

和右箭头相同的东西:)