2

我使用这个jsFiddle在我正在设计的网页上实现了一个类似于 div 的 groupon (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).parent() （因为 $ （this）是链接，父是div）

编辑：更新以缓存父级。

于 2012-06-24T17:57:43.683 回答