jquery向下滚动并按下按钮

Question

我试着向下滚动按钮。我写了很多代码，但都不起作用。 我用代码解释。

<div class="component"> 
    <div class="go_up"></div> 
    <div class="go_down"></div> 
    <div id="content1" class="componentin"> 
    <div id="item"></div> 
    </div> 
</div> 

这是我的HTML代码。我想通过px滚动项目。此外，我在页面中多次使用这个html代码，所以代码必须更具体。我试图动画第一个元素的按钮div后，哪个类命名的项目。这是我的jQuery代码（不行）

$(".go_up").click(function(){ 
    var this1 = $(this); 
    var content = $(this1 + '+ .componentin'); 
    var $component = $(content + ':first-child'); 
    $component.animate({"marginTop": "-=50px"}, "slow"); 
}); 
$(".go_down").bind('click',function(){ 
    var this1 = $(this); 
    var content = $(this1 + '+ .componentin'); 
    var $component = $(content + ':first-child'); 
    $component.animate({"marginTop": "+=50px"}, "slow"); 
}); 

感谢您的帮助

Answer 1

你选择的表达不正确。代码$('element1 + element2')只选择直接兄弟姐妹。

//works 
$('element1 + element2') 
<element1 /> 
<element2 /> 

//but doesn't work here 
$('element1 + element2') 
<element1 /> 
<something /> 
<element2 /> 

而是使用兄弟选择器。

http://jsfiddle.net/F7UqC/

$(".go_up").click(function(){ 
    $(this) 
     .siblings('.componentin') 
     .children('#item') 
     .animate({"marginTop": "-=50px"}, "slow"); 
}); 
$(".go_down").bind('click',function(){ 
    $(this) 
     .siblings('.componentin') 
     .children('#item') 
     .animate({"marginTop": "+=50px"}, "slow"); 
});