Question

这里我有一些例子和1.case中相同的代码不工作，但在2.case工作。为什么？

所以我需要在1.case中工作，就像按钮在2.case中工作一样。

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

    var t = $(this);

    $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 if ($(this).hasClass("ca_button")) {
        t.find("a").css("background-color", "#F00");
    }
});

Answer 1

更改您的html：

<div>PRICE - 1.case
<a href="javascript:void(0)" class="ca_button" onClick="setQuality(-100, 'price_quality', '{$lang501}/{$lang502}');">Disadvantage</a>
<a class="button">Average</a>

优势

到此：

<div>PRICE - 1.case
<div class="ca_button"><a href="javascript:void(0)" class="ca_button" onClick="setQuality(-100, 'price_quality', '{$lang501}/{$lang502}');">Disadvantage</a>
    </div>
<a class="button">Average</a>

优势

Answer 2

由于t.find("a")。

在你的第一个案例中，没有a作为具有类ca_button或`ca_button``的元素的子元素。

在您的代码中，您为.ca_button和.ca_button``, so the t will be pointing to that, then in the code where you are changing the color you are looking for a a`元素注册了点击事件，作为点击目标的子项。

此案例与案例1不符。

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

    var t = $(this);

    $par = t.parent();

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

    var t1 = t.is('a') ? t : t.find('a');

    if (t.hasClass("ca_button1")) {
        t1.css("background-color", "#0F0");
    } else if (t.hasClass("ca_button")) {
        t1.css("background-color", "#F00");
    }
});

演示：Fiddle

Css和jquery背景颜色变化

2 个答案: