两个单独的单击功能上的备用 css 更改答案

【问题标题】：Alternate css change on two separate click functions两个单独的单击功能上的备用 css 更改
【发布时间】：2016-01-04 13:07:47
【问题描述】：

我正在尝试使用两个 click 元素来影响特定元素的 css 更改，其中每个 click 元素会影响不同的 css 更改，具体取决于我希望更改的元素的 css 属性。

我可以在第一个 click 元素上使用 if else 语句应用这些更改，但是当我添加第二个 click 函数时它无法工作。两种点击功能都单独工作，但仅将第一个功能放在一起。

谁能看到我在链接的 JSFiddle 中哪里出错了？

JSFiddle of what I have so far

【问题讨论】：

最好发布您的代码而不是 JSFiddle 链接。
@GaryVoss: This 是我出于兴趣使用 TweenMax 制作的。

标签： jquery if-statement click jquery-animate

【解决方案1】：

你有语法错误。

 $('.next').click(function() {
        if($('.a').css('left') == '0px') {
            $(".a").animate({left: "105px", top: "0px", width: "150px", height: "100px"});
        }
        else if ($('.a').css('left') == '105px') {
            $(".a").animate({left: "260px", top: "25px", width: "100px", height: "50px"});
        }  
    });

    $('.prev').click(function() {
        if($('.a').css('left') == '105px') {
            $(".a").animate({left: "0px", top: "25px", width: "100px", height: "50px"});
    }
    else if ($('.a').css('left') == '260px') {
        $(".a").animate({left: "105px", top: "0px", width: "150px", height: "100px"});
    }  
});

http://jsfiddle.net/v84cfcu0/1/

【讨论】：

【解决方案2】：

你有一个语法错误。

你有 ($);在每个点击事件结束时。

它看起来像这样：

})($);

您不需要($); 它应该如下所示：

});

在此处显示更新后的代码：

$('.next').click(function() {
    if($('.a').css('left') == '0px') {
        $(".a").animate({left: "105px", top: "0px", width: "150px", height: "100px"});
    }
    else if ($('.a').css('left') == '105px') {
        $(".a").animate({left: "260px", top: "25px", width: "100px", height: "50px"});
    }  
});

$('.prev').click(function() {
    if($('.a').css('left') == '105px') {
        $(".a").animate({left: "0px", top: "25px", width: "100px", height: "50px"});
    }
    else if ($('.a').css('left') == '260px') {
        $(".a").animate({left: "105px", top: "0px", width: "150px", height: "100px"});
    }  
});

JSFIDDLE FIX

【讨论】：