jquery - JQuery 只工作一次

Question

<h4>我为强调点击标签编写了 jquery 函数。但它只能工作一次。那么我如何解决这个问题。这是我的代码。

   $(document).ready(function(){
        $('h4').click(function(){
            var a = $('h4').attr('style');
            if(a=='font-size: 1.5em'){
                $(this).css('font-size','2.5em');
            }
            else{
                $(this).css('font-size','1.5em');
            }
        });
    });  

Answer 1

如果你把一个简单console.log(a)的东西混在一起，你就会发现问题所在。当你这样做时：

$(this).css('font-size', '1.5em');

您最终将样式属性设置为font-size: 1.5em;，请注意分号。因此，一旦您切换回 1.5em，您的平等测试就会失败。我不会依赖style属性中的任何特定格式，可能会有与您预期不同的空格数（可能没有），可能会有您不希望出现的分号，...

您最好使用 CSS 类来执行此操作。HTML 看起来像这样：

​&lt;h4>Header</h4>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

和CSS是这样的：

​h4 {
    font-size: 1.5em;
}
h4.emphasized {
    font-size: 2.5em;
}​

最后，你的 JavaScript 会像这样简单：

$('h4').click(function() {
    $(this).toggleClass('emphasized');
});

演示：http: //jsfiddle.net/ambiguous/2rpxa/

​</p>