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});
    }
});

和右箭头相同：）

jquery滚动动态元素

2 个答案: