2

为我的最后一个问题做得如此糟糕而道歉。

在这段代码中，我试图让一个 div 在单击按钮时能够左右移动（LButton 或 RButton）

我试图做的是有一个初始变量'click' = 0，当单击按钮时，它会将'1'添加到变量中。在 if 语句中的想法是，一旦按钮被单击一次，如果 click = 1 可以再次单击它以使 div 向左移动额外的 850 px。

这不是最实用的方法，我不确定它在语义上是否正确。有没有人有关于完成这项工作的建议，或者可能是完成这项工作的更好方法？

var click=0;
if (click === 2) {
$(function () {
    $('.RButton').click(function (e) {
        $('.slideContain').animate({
            'margin-left': '-2550px'
        });
    });
});
} else if (click === 1) {
$(function () {
    $('.RButton').click(function (e) {
        $('.slideContain').animate({
            'margin-left': '-1700px'
        }); 
    var click = (click + 1);
    });
});
} else if (click === 0) {
$(function () {
    $('.RButton').click(function (e) {
    $('.slideContain').animate({
        'margin-left': '-850px'
    });
    var click = (click+1);
});
}
4

4 回答 4

1

不要在 if 语句中绑定事件处理程序，将 if 语句放在事件处理程序中。

$('.RButton').click(function (e) {

    if (someCondition) {
        $('.slideContain').animate({
            'margin-left': '-2550px'
        });
        //update state here
    } else if (someOtherCondition) {
        $('.slideContain').animate({
            'margin-left': '-1700px'
        });
        //update state here
    } else {
        $('.slideContain').animate({
            'margin-left': '-850px'
        });
        //update state here
    }

});

关于如何跟踪当前状态以及单击按钮时需要发生什么，我将由您自己决定，但这应该会推动您朝着正确的方向前进。

另请注意，当您var在函数内部定义变量时，您会创建一个新实例，而不是使用全局范围的实例。

于 2013-09-25T20:31:20.163 回答
1

我认为您应该使用一个对象来关联哪个状态映射到哪个位置，而不是使用一系列if语句。试试我在 jsFiddle 上写的这个例子。我只是为了演示稍微修改了位置，但是您可以根据自己的情况轻松更改它们。

jQuery(document).ready(function($) {
    var clickState = 0;
    var cssForState = [{
            'margin-left': '0px'
        },{
            'margin-left': '100px'
        },{
            'margin-left': '200px'
        }];

    var advanceToNextClickState = function() {
        clickState++;
        if (clickState >= cssForState.length)
            clickState = 0;
    }

    $('.RButton').click(function (e) {
        console.log("Received click while clickState = " + clickState);
        advanceToNextClickState();
        $('.slideContain').animate(cssForState[clickState]);
    });    
});

如果您想要另一个按钮，您可以使用第二个处理程序扩展它，但更优选的解决方案可能是这样的：

jQuery(document).ready(function($) {
    var clickState = 0;
    var cssForState = [{
            'margin-left': '0px'
        },{
            'margin-left': '100px'
        },{
            'margin-left': '200px'
        }];

    var previousClickState = function() {
        clickState--;
        if (clickState < 0)
            clickState = cssForState.length - 1;
    };

    var nextClickState = function() {
        clickState++;
        if (clickState >= cssForState.length)
            clickState = 0;
    };

    var slideToPosition = function(position) {
        console.log("Sliding to position = " + clickState, cssForState[position]);
        $('.slideContain').animate(cssForState[position]);    
    }

    $('button').click(function (e) {
        console.log("Received click", this, e.target);
        var $button = $(this);
        if ($button.hasClass("LButton"))
            previousClickState();
        else if ($button.hasClass("RButton"))
            nextClickState();
        slideToPosition(clickState);
    });     
});
于 2013-09-25T21:17:43.783 回答
0

它不能替换var click = (click+1);为click++;，它会运行良好。

没有理由创建一个新变量，它根本行不通。

也更改if (click3 === x)为if (click % 3 === x)，这将允许它环绕 - 时间 #4 将执行动作 #1，而 #8 将执行 #2 等。

也把你所有的代码，除了你的var click = 0;里面一个大

$('.RButton').click(function (e) {
}
于 2013-09-25T20:21:39.383 回答
0 
$('.RButton').click(function (e) {
    $('.slideContain').animate({
        if(click == 2)
        'margin-left': '-2550px'
         if(click == 1)
        'margin-left': '-1770px'
         if(click == 0)
        'margin-left': '-850px'
    });

简单而优雅。请在点击事件中使用 if 条件。

于 2013-09-25T21:03:05.233 回答