動態元素

Question

我有一個情況我需要多次滾動jquery的滾動左/右的事件，通常我使用類似：

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

但在這case我使用some_container使用PHP foreach多個實例，我不想在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}); 
    } 
}); 

和右箭頭:)