如何使用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效果

回答

相關問題