Question

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

我无法弄清楚如何使它成为每个div中的控制器只滚动其特定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");

Answer 2

$(".button1").click(function(){ 
    $(this).parents(".box-wrap").find(".box").animate({"top": "-=50px"}, "slow"); 
});

希望这会有所帮助。

虽然如果你正在滚动文本我会建议使用scrollTop（）而不是动画“顶部”值。

Jquery div滚动问题

2 个答案: