jqueryはボタ​​ンで上下にスクロールします

私はボタンで上下にスクロールしようとしています。私はたくさんのコードを書いたが、すべて動作しなかった。
私はコードで説明します。

<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の後にitemという名前のクラスの最初の要素をアニメーション化しようとしました。これは私の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");
});

手伝ってくれてありがとう

ベストアンサー

セレクタ式が正しくありません。コード $( 'element1 +
element2')
は、直接の兄弟のみを選択します。

//works
$('element1 + element2')



//but doesn't work here
$('element1 + 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");
});

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です