如何使用JavaScript切換某些jQuery效果

Question

我希望能夠通過使用javascript在jquery中切換某些效果，此代碼正確嗎？ 最簡單的解決方案是什么？

ps不會說“ use .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);
        });
    });

謝謝大家的寶貴時間。

Answer 1

最簡單的方法可能是將data屬性作為標志，並在對象中使用三元，就像這樣

$('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);
});

小提琴

Answer 2

至於為什么代碼無法正常工作，您只是在第一次單擊處理程序中使用了錯誤的運算符，而沒有定義函數，因此正確的代碼應為：

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的解決方案，因為它更優雅，更不冗長