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");
});

jquery向下滚动按钮

1 个答案: