Question

当我单击页面上的某个按钮时，我想要一个文本字符串将颜色从默认值更改为＃c30，当我再次单击该按钮时，它会更改回默认值。

我的代码如下所示：

$("#button").click(function() {
    var anno = $(#text);
    if (anno.css('color') == '#c30') {
        anno.css('color', '');
    } else {
        anno.css('color', '#c30');
    }

});

但它似乎不适用于FF3。虽然在IE中工作。有什么想法吗？

Answer 1

我会尝试尽可能地分离表示细节，即更改元素所属的类，并将颜色信息保留在单独的样式表中。

$("#button").click(function() {
        $("#text").toggleClass('somethingDescriptive');
});

Answer 2

如果您使用命名颜色，这将有效。

$("#button").click(function(){
      $("#text").css('color', $("#text").css('color') == 'white' ? 'black' : 'white');    
});

十六进制值不会。

无论如何，这是一个糟糕的方式，我同意这里最受欢迎的答案。所以我经过一些研究后更新了我的答案。

<style type="text/css">
     .color1 { color:#fff; }
     .color2 { color:#000; } 
</style>
<script>
    $("#button").click(function(){
          $("#text").toggleClass('color1').toggleClass('color2');
    });
</script?

<div class="color1">Text</div>

Answer 3

颜色＃c30转换为＃cc3300 - 这就是它无法正常工作的原因。

如何使用jQuery在2种CSS颜色之间切换？

3 个答案: