Question

对于我上一个问题做得很糟糕的道歉。

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

我试图做的是初始变量'click'= 0，当点击按钮时，它会向变量添加'1'。在if语句中，我们的想法是，一旦单击按钮一次，如果单击= 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语句中绑定事件处理程序，将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定义变量时，您将创建一个新实例，并且不要使用全局范围的实例。

Answer 2

我认为你应该使用一个对象来关联哪个状态映射到哪个位置而不是一串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);
    });     
});

Answer 3

它无法使用var click = (click+1);替换click++;并且运行正常。

没有理由创建新变量，它根本无法工作。

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

除了var click = 0;在一个大的

之外，还要放置所有代码

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

Answer 4

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

简单而优雅。请使用click事件中的条件。

使用“if / else if”语句启动.click函数

4 个答案: