jquery - Div 使用 jquery 获取颜色并在单击时丢失

Question

人们

在这里，我有一个用于评级（劣势、平均、优势）的 JS 代码和所有这些参数的按钮。

但是我有一个问题，当我点击劣势、平均和优势按钮时，如果之前在这些按钮上点击过，它必须失去颜色，如果我点击平均或优势也是一样的，因为其他按钮必须失去颜色并且只有单击的按钮以获取颜色。问题出在某个地方。我将代码放在一个 jsfiddle 中：

http://jsfiddle.net/mwsvP/

$(".ca_button, .ca_button1").click(function () {

    $this = $(this);

    if ($this.is("a")) {
        $this = $this.parent();
    }

    $par = $this.parent();

    $par.find(".ca_button, .ca_button1").css("background-color", "#bababa");

    if ($(this).hasClass("ca_button1")) {
        $this.find("a").css("background-color", "#0F0");
    } else {
        $this.find("a").css("background-color", "#F00");
    }

    return false;

});

Answer 1

我认为问题在于你定义这个变量的方式：

$this = $(this);

如果你这样做应该会更好：

var t = $(this);

然后t在你现在使用的任何地方使用$this.

$(".ca_button, .ca_button1").click(function () {

    var t = $(this);

    if (t.is("a")) {
        t = t.parent();
    }

    $par = t.parent();

    $par.find(".ca_button, .ca_button1").css("background-color", "#bababa");

    if ($(this).hasClass("ca_button1")) {
        t.find("a").css("background-color", "#0F0");
    } else {
        t.find("a").css("background-color", "#F00");
    }

    return false;

});

这是您更新的 jsFiddle：http: //jsfiddle.net/mwsvP/2/