javascript - jquery div滚动问题

Question

我有一个页面需要多个具有相同类名的 div。在每个 div 中都有我想通过 Controller 滚动的文本。

我想不出如何让每个 div 中的 Controller 仅滚动其特定 div 中的文本，而不是页面上共享同一类的每个 div 中的文本。每个 div 看起来像这样:

<div class="box-wrap"> 
    <div class="box"> Text that will be scrolled </div> 
    <div class="controllers"> 
        <div class="button1"> Scroll Up </div> 
        <div class="button2"> Scroll Down </div> 
    </div> 

使用下面的代码一切正常，但每个 div 中的按钮将导致页面上的每个 div 滚动:

$(".button1").click(function(){
  $(".block").animate({"top": "-=50px"}, "slow");
});


$(".button2").click(function(){
  $(".block").animate({"top": "+=50px"}, "slow");
});

将代码更改为 $(".block", this).animate({"top": "+=50px"}, "slow");使其完全停止工作。

有什么想法吗？

Answer 1

首先，您的示例代码中没有 .block 类。假设您的意思是 .box，您可以使用 parent()和 prev()方法:

$(this).parent(".controllers").prev(".box").animate({"top": "+=50px"}, "slow");