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

Posted 2023-05-08

【中文标题】两个单独的单击功能上的备用 css 更改

【英文标题】：Alternate css change on two separate click functions

【发布时间】：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 制作的。

【参考方案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