如何通過按下按鈕而不是通過推動div本身來移動我的移動div？

Question

我使用這個jsFiddle在我正在設計的網頁上實現一個groupon（groupon.com）像div一樣。

我的問題是，不是在div上點擊右鍵來移動它，你將如何設置它，以便每個div都有一個按鈕，並且您必須單擊按鈕（位於div上）才能繼續下一步div，而不是僅僅點擊div本身w/no按鈕？

所有幫助都非常感謝！

Answer 1

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

相同的代碼，只是調整，這樣當鏈路（或按鈕）被按下它同樣不是使用$，但（這）（曾經是在div）你現在要做的$（這個）.parent（）（因爲$（this）是鏈接，父是div）

編輯：更新以緩存父。

Answer 2

我已經用你現有的代碼更新了你的小提琴，只要看看this demo。

$('.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); 
    } 
}); 

Answer 3

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

參見DEMO