Question

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

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

任何人都可以在链接的JSFiddle中看到我出错的地方吗？

Answer 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/

Answer 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

两个单独的单击功能上的替代css更改

2 个答案: