如何使用javascript切换某些jQuery效果

我想通过使用javascript在jQuery中切换某些特效，请问这段代码是否正确？什么是最简单的解决方案？如何使用javascript切换某些jQuery效果

P.s.不要说 “使用.toggle（）”，目前它导致它最大限度地减少该段

HTML

<!--This first line calls in jquery--> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
<p>Hello all</p>

CSS

p { 
    color: red; 
    background-color: lightblue; 
    border-radius: 5px; 
    height: 50px 
}

JQUERY错误/ JAVASCRIPT

var num = 0; 

$(document).ready(function() { 
    $("p").click(
    if (num == 0) { 
     var num == 1; 
    } else { 
     var num == 0;); 

    $("p").click(function() { 
     if (num == 1) { 
      $(this).animate({ 
       color: "black", 
       backgroundColor: "white", 
       fontFamily: "arial", 
       fontSize: "20px", 
       fontFamily: "serif" 
      }, 500); 
     } else { 
      $(this).animate({ 
       color: "red", 
       backgroundColor: "lightblue", 
       borderRadius: "5px", 
       height: "50px", 
      }, 500); 
     }); 
    });

谢谢大家你的时间，我真的很感激。

来源

2014-11-08 marcnetz

做到这一点的最简单的方法可能是作为一个标志数据属性，并在对象ternarys，这样

$('p').on('click', function() { 
    var flag = $(this).data('flag'); 

    $(this).animate({ 
     color   : flag ? "red"  : "black", 
     backgroundColor : flag ? "#ADD8E6" : "white", 
     fontSize  : flag ? "20px" : "10px", 
     borderRadius : flag ? "5px"  : "0px" 
    }); 

    $(this).data('flag', !flag); 
});

FIDDLE

来源

2014-11-08 18:52:06 adeneo

这是一个很好的答案！但我也想知道为什么我的代码不起作用？ @adeneo – marcnetz 2014-11-08 18:55:17

你的代码不起作用，因为它充满了语法错误！你不能只写'$（'p'）。click（if（this）that）'< - 这是一个语法错误 – adeneo 2014-11-08 19:59:07

至于为什么你的代码不能正常工作，你只是用你的第一个单击处理错误的运营商，而不是定义一个函数，正确的代码应该是：

var num=0; 

$(document).ready(function() { 

$("p").click(function(){ 
    if (num == 0) { 
     num = 1; 
    } else { 
     num = 0; 
    } 
}); 

$("p").click(function() { 
    if (num == 1) { 
     $(this).animate({ 
      color: "black", 
      backgroundColor: "white", 
      fontFamily: "arial", 
      fontSize: "20px", 
      fontFamily: "serif" 
     }, 500); 
    } else { 
     $(this).animate({ 
      color: "red", 
      backgroundColor: "lightblue", 
      borderRadius: "5px", 
      height: "50px", 
      fontSize: "12px", 
     }, 500); 
    } 
}); 

});

不过我更喜欢@adeneo因为它更优雅，更简洁

来源

2014-11-08 19:09:15

http://jsfiddle.net/c2mr85am/你确定这是正确的吗？它不起作用。 – marcnetz 2014-11-08 19:16:06

http://jsfiddle.net/c2mr85am/2/全部整理起来 – marcnetz 2014-11-08 19:38:02

对不起，有一些语法错误，没有测试，现在修复它。但是，如果您的页面中只有一个“p”元素，则此代码仅适用于num变量为全局变量。如果你有多个'p'元素，@ adeneo的解决方案就是要走的路。（PS：vanialla Jquery不能做彩色动画，所以使用'color'和'background-color'将不起作用。然而有一个插件可以实现这个功能：[Jquery Color]（https://github.com/jquery/jquery-color）） – 2014-11-08 20:03:25

如何使用javascript切换某些jQuery效果

回答

相关问题