2

このjsFiddleを使用して、デザインしているWebページにdivのようなグルーポン（groupon.com）を実装しました。

私の質問は、divを右クリックして移動するのではなく、各divにボタンがあり、ボタン（divにある）をクリックして次のdivに進むように設定するにはどうすればよいですか？ボタンなしでdiv自体をクリックするだけですか？

すべての助けは大歓迎です！

4

3 に答える 3

4

既存のコードでフィドルを更新しました。このデモをご覧ください。

$('.box button').click(function() {
    $('.box').each( function() {
        if ($(this).offset().left < 0) {
            $(this).css("left", "150%");
        }
    });

    var t=$(this);
    t.parent().animate({ left: '-50%' }, 500);
    if (t.parent().next().size() > 0) {
         t.parent().next().animate({ left: '50%' }, 500);
    }
    else{
        t.parent().prevAll().last().animate({ left: '50%' }, 500);
    }
});
于 2012-06-24T17:59:29.267 に答える
1

HTML の例

<div id="container">
    <div id="box1" class="box"><button class="button">Div #1</input></div>
    <div id="box2" class="box"><button class="button">Div #2</input></div>
    <div id="box3" class="box"><button class="button">Div #3</input></div>
    <div id="box4" class="box"><button class="button">Div #4</input></div>
    <div id="box5" class="box"><button class="button">Div #5</input></div>
</div>

スクリプト例

$('.box .button').click(function() {
    $('.box').each( function() {
        var $currentBox = $(this);

        if ($currentBox.offset().left < 0) {
            $currentBox.css("left", "150%");
        }
    });

    var $currentDiv = $(this).parent();

    $currentDiv.animate({
         left: '-50%'
     }, 500);

     if ($currentDiv.next().size() > 0) {
         $currentDiv.next().animate({
             left: '50%'
         }, 500);
     } else {
         $currentDiv.prevAll().last().animate({
             left: '50%'
         }, 500);
     }
});

</p>

デモを見る

于 2012-06-24T18:02:47.877 に答える
0

http://jsfiddle.net/ykbgT/2446/

同じコードで、リンク (またはボタン) が押されたときに同じように動作するように微調整されていますが、$(this) (以前は div) を使用する代わりに、$(this).parent() を実行するようになりました ($ (this) はリンクで、親は div です)

編集：親をキャッシュするように更新されました。

于 2012-06-24T17:57:43.683 に答える