1

我目前有一个时间表，如果我点击一个特定的类元素，它会突出显示。如果我单击屏幕上的其他任何位置，它将不再突出显示。它完美地工作。

但是，如果我单击一个类元素，然后单击同一类元素的另一个条目，它们都会突出显示。这是我的代码中的一个问题，但我不知道要修改什么来更改它。

这是JS（删除了不相关的部分）：

$(document).click(function() {  
    $('.outter').css("background-color","rgba(52, 73, 94, 0.8)");
});

$(document.body).on('click', '.outter', function(e) {
    $(this).css("background-color","#000");
});

所以，基本上它会影响“外部”类。html的一个例子：

<td id="mon-9">
    <p class="outter" style="background-color: rgba(52, 73, 94, 0.8);">
        Programming
        <br/>
        Lecture
    </p>
</td>
<td id="tue-9">
    <p class="outter" style="background-color: rgba(52, 73, 94, 0.8);">
        BPI
        <br/>
        Lecture
    </p>
</td>

所以在这个特定的场景中，如果我点击其中任何一个，它们会显示为黑色，当我点击它们时，它们会恢复正常。有用。但是，如果我单击一个，然后单击另一个，两者都会变黑。在我单击 .outter 选项卡外部之前，不会恢复正常。我会给他们单独的 ID，但是有很多条目。所以那将是愚蠢的。

有没有更好的方法来实现我所追求的？

4

1 回答 1

1

如果您只想突出显示一个实例：

$(document).click(function() {  
    $('.outter').css("background-color","rgba(52, 73, 94, 0.8)");
});

$(document.body).on('click', '.outter', function(e) {
    $('.outter').css("background-color","rgba(52, 73, 94, 0.8)"); //sets all elements to the initial color
    $(this).css("background-color","#000");
});

只需在更改单击的元素之前将所有元素设置为初始颜色。这是一种快速简便的方法（即不推荐），而不是一种优越的方法。

于 2013-04-14T07:44:57.363 回答