javascript - 使用 jquery 更改 DOM 元素 CSS Not

Question

我有两个可点击的标题。当您单击其中一个时，它会变为蓝色。如果单击另一个标题，它会变为蓝色，但应“取消单击”另一个标题并将其变回黑色。

我正在尝试使用 jquery 不是...

$("#pal1, #pal2").click(function(event) {
    $(this).css({"color" : "blue"});
    var pal1 = $(this).attr('id');
    var pal2 = $(this).next().attr('id');   
    $(this).not(pal2).css({"color" : "black"}); //if the selected heading is not pal1, or not pal2, changed the one that is not == $(this) back to black.
});

或者类似的东西。

---

编辑:我知道我可以这样做...但想使用 jQuery 函数来减少代码大小。而且这不是很有效。

$("#pal1, #pal2").click(function(event) {
    $(this).css({"color" : "blue"});        
    if ($(this).attr('id') !== $("#pal1").attr('id')) {
        $("#pal1").css({"color" : "black"});
    }
    else {
        $("#pal2").css({"color" : "black"});
    }
});

Answer 1

将两者都设置为black，然后将点击的设置为blue。

$("#pal1, #pal2").click(function(event) {
  $("#pal1, #pal2").css({"color" : "black"});
  $(this).css({"color" : "blue"});
});