Question

我使用这个jsFiddle在我正在设计的网页上实现了一个像group（groupon.com）这样的div。

我的问题是，不是在div上单击右移动它，你将如何设置它以便每个div都有一个按钮，你必须单击按钮（位于div上）才能进入下一个div ，而不是单击div本身w / no按钮？

非常感谢所有帮助！

Answer 1

我已使用您现有的代码更新您的小提琴，只需查看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 2

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

Answer 3

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

相同的代码，只是调整，以便当按下链接（或按钮）时它做同样的但不是使用$（this）（以前是div）你现在做$（this）.parent（）（因为$（this）是链接而父级是div）

编辑更新以缓存父级。

如何通过按下按钮而不是通过推动div本身来移动div来移动div？

3 个答案: