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将如下所示：

<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/

Answer 2

使用它：

 $(document).ready(function(){
    $('h4').click(function(){
var a = $(this)
if($(a).hasClass('smaller')){
    $(this).removeClass('smaller');
    $(this).addClass('bigger');
}
else{
    $(this).removeClass('bigger');
    $(this).addClass('smaller');
}

}）; }）;

与CSS一起

.smaller { font-size: 1.5em; }
.bigger { font-size: 2.5em; }

JQuery只工作一次

2 个答案: