如何通过按下按钮而不是通过推动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