Question

我这里有一个简单的代码

         $("#faqs h4").click(function(){
                var div=$("div");
                    var h4=$("h4");       
                    h4.animate({letterSpacing:'0.1em'}, "slow");

                 });

单击h4标题时，字母将间隔为0.1em。现在我无法弄清楚如何编写另一个代码，以便在再次单击时返回到0.0em。救命！谢谢！

Answer 1

这是使用外部变量来包含h4的间距状态的一种方法：

var spaced = false;
$("#faqs h4").click(function(){
    var spacing = spaced ? '0em' : '0.1em'; // decide which spacing to use
    spaced = spaced ? false : true;         // set state to either or
    $(this).animate({letterSpacing: spacing}, "slow");
});

演示：http://jsfiddle.net/Pyd6e/1/

编辑：根据Qaribou评论的Josh，我没有注意到你选择元素的方式。您应该使用this来引用当前单击的h4元素，否则您的所有h4都将参加派对。更新了答案和小提琴。

Answer 2

这是你可以做到的一种方式：

$("#faqs h4").click(function(){
    var div=$("div");
    var h4=$("h4");
    var theSpacing = h4.css('letterSpacing');

    if (theSpacing == '0em') {
        h4.animate({letterSpacing:'0.1em'}, "slow");
    }
    else {
        h4.animate({letterSpacing: '0em'}, 'slow');
    }

});

或其他方式

var theSpacing = 0; // set a counter var to  use as a toggle method
$("#faqs h4").click(function(){
    var div=$("div");
    var h4=$("h4");

    if (theSpacing == 0) {
        h4.animate({letterSpacing:'0.1em'}, "slow");
        theSpacing += 1; // sets it not equal to 0 so on next click it will run the else statement
    }
    else {
        h4.animate({letterSpacing: '0em'}, 'slow');
        theSpacing = 0; // sets it equal to 0 so on next click will run the code in the if statement
    }

});

如何使用单击功能撤消点击事件？

2 个答案: