Javascript ScrollTo 仅将事件应用于父 div

Question

问题:我有两个具有相同内容和多个 anchor 的 div(可滚动)，如果您单击一个 div 中的滚动触发按钮，两个 div 内容都会滚动，但只有一个(单击的位置)应该滚动。如何将事件绑定(bind)到单击触发器的div？尝试使用 $(this) 但无法弄清楚。

代码如下:

<div class="tile_list_wrapper">
<div class="tile__list">
   <a class="quickmark" href="https://google.com" target="Google" ondrop="checkondrop();"><img src="../../images/add_icon.png"></a>
   <a class="quickmark" href="https://google.com" target="Google" ondrop="checkondrop();"><img src="../../images/add_icon.png"></a>
 <button class="tile__more">more </button>
</div> 
</div>

<div class="tile_list_wrapper">
<div class="tile__list">
   <a class="quickmark" href="https://google.com" target="Google" ondrop="checkondrop();"><img src="../../images/add_icon.png"></a>
   <a class="quickmark" href="https://google.com" target="Google" ondrop="checkondrop();"><img src="../../images/add_icon.png"></a>
 <button class="tile__more">more </button>
</div> 
</div>


<script>
var $quickmarks = $('.tile__list').children('a');
var $chScrollPositions = new Array();

$quickmarks.each(function(i){
$chScrollPositions[i] = Math.round($(this).offset().top - $('.tile__list').offset().top) - 8;
});

$quickmarks.eq(0).addClass('active');

$('button').click(function(){
var last = $quickmarks.parent().find('a.active').removeClass('active').index();
var next;

switch($(this).index()){
    case 1: 
        next = (last + 4 == $quickmarks.length) ? 0 : last + 4; // Loop around to first
}
$quickmarks.eq(next).addClass('active');
$('.tile_list_wrapper').scrollTo($chScrollPositions[next]);
});
</script>

Answer 1

行$('.tile_list_wrapper').scrollTo($chScrollPositions[next]);将选择具有tile_list_wrapper类的所有项目

将其更改为:

var $thisTile = $(this).siblings('.tile_list_wrapper');
$($thisTile).scrollTo($chScrollPositions[next]);