Question

您好我已经编写了一个代码来更改tr的css（颜色字体）。但它不起作用。如果我有条件并使用$（this）.css（“color”，“white”）;然后它完美地运作。但是当我在if条件下执行此操作时，它无法更改文本颜色。我做错了什么？感谢。

$('tr').click(function () {
        $(this).toggleClass('hilite');          
        //$(this).css("color","white");
        if($(this).css("color") == "black"){
            alert("In first if");
            $(this).css("color","white");
        }else{$(this).css("color","black");}
    });

Answer 1

我怀疑如果你查看$(this).css("color")的返回值（例如in a debugger），你会发现它不是“黑色”而是“rgb（0,0,0）”或类似的。（你可以see it here - 我在Chrome中获得了“rgb（0,0,0）”，也可能是许多其他浏览器。）你需要通过跟踪颜色来处理它（或许是基于你的“hilite”[sic]类）或解析结果。

当然，最好的方法是让你的“hilite”类控制文本和背景颜色，这样你就不必在JavaScript中完成它了。例如，遵守这条规则：

tr.hilite, tr.hilite td, tr.hilite th {
  background-color: black; /* Or whatever your dark background color is */
  color: white;
}

偏离主题：每次调用$()时，都会涉及多个函数调用和内存分配，所以如果您打算这样做连续几次，最好抓住结果并重复使用。

$('tr').click(function () {
    var $this = $(this);               // Grab it once
    $this.toggleClass('hilite');       // Use it throughout
    //$this.css("color","white");
    if($this.css("color") == "black"){ // (You'll still need to fix this)
        alert("In first if");
        $this.css("color","white");
    }else{$this.css("color","black");}
});

Answer 2

使用类而不是处理.css调用。您可以通过调用.hasClass('foo')轻松检查元素是否具有类。

也许这就是'hilite'课程的用途？如果是这样，您可以更改为：

$('tr').click(function () {          
    if($(this).hasClass("hilite")){
        alert("In first if");
    }
    $(this).toggleClass('hilite');
});

Jquery颜色变化不起作用

2 个答案: