Question

问题：我有两个具有相同内容和多重锚点的div（可滚动），如果你点击一个div中的滚动触发按钮，两个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>

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

Javascript ScrollTo仅将事件应用于父div

1 个答案: