jquery - 使用 "if/else if"语句启动 .click 函数

Question

对我最后一个问题提出的问题表示歉意。

在这段代码中，我试图让 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);
});
}

Answer 1

我认为您应该使用一个对象来关联哪个状态映射到哪个位置，而不是使用一系列 if 语句。试试this example I wrote on 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]);
    });    
});

如果您想要另一个按钮，您可以使用第二个处理程序扩展它，但更优选的解决方案可能类似于 this :

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