Javascript 如何通过不同的点击同时更改多个CSS？

正如您在单击第一个亚马逊图标时看到的，按钮上的框被选中。如何高亮显示未同时高亮显示的框。例如，如果您单击第一个按钮，则会选择1、3和5。我如何保持这些突出显示，然后单击第二个amazon并突出显示/或更改方框2的CSS，以便将1、2、3和5更改为橙色

$（“输入[type=image]”）。在（“单击”，函数（）{
$（“p.the-text”）.removeClass（“彩色化”）；
var cat=$（this.attr（“数据cat”）；
$（“p.the-text.+cat）.addClass（“彩色化”）；
})

p.the-text，p.the-text1，p.the-text2，p.the-text3，p.the-text4，p.the-text5，p.the-text6，p.the-text7，p.the-text8，p.the-text9，p.the-text10，p.the-text11，p.the-text12，p.the-text13，p.the-text14，p.the-text15，p.the-text16，p.the-text17，p-text19{边框颜色：#CACACA；填充：10px；颜色：#CACACA；字体大小：粗体；背景颜色：白色；字体系列：“ff din web CONNECTED”，无衬线；边框样式：实心；边框宽度：1px；}
p、 颜色化的，颜色化的，颜色化的，颜色化的，颜色化的，颜色化的，颜色化的，颜色化的，颜色化的，颜色化的，颜色化的，颜色化的，颜色化的，p.the-text16.colorzied，p.the-text17.colorzied，p.the-text18.colorzied，p.the-text19.colorzied{颜色：白色；背景色：橙色；边框颜色：橙色；字体系列：“ff din网络压缩”，无衬线；}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

如果我理解正确，我认为您只需要在其中添加一行您不需要的内容。请尝试以下操作：

<script>
  $("input[type=image]").on ("click", function() {
    var cat = $(this).attr("data-cat");
    $("p.the-text." + cat).toggleClass("colorized");
  })
</script>

取消所有框的高亮显示，然后立即重新高亮显示2、4和5，因为它们具有“cat2”类

---

编辑：使用toggleClass（）而不是addClass（）再次单击按钮时，使行不亮。

像这样？我假设不是，但不清楚您想做什么。为什么单击第二个图标只会使框2有颜色-它不应该是颜色2和4吗？也许更好

切换类
），所以您可以一针见血。我仍然需要它来重新设置如果再次单击按钮，请移动css中的更改。我不知道规则，但我想他们会希望你提出一个新问题。继续提问，我会检查你的个人资料以了解新问题。另外，请将此标记为对我正确^ ^我刚刚删除了那一行。否则，你的代码是正确的：Perfect！谢谢。啊哈。所以当一个css被改变，然后你点击一个想要改变css的按钮时，它会使它恢复到原来的状态，而不是像预期的那样保持橙色。点击前两个按钮时，请勾选框5。框5的问题是你再次切换它。这需要一些更复杂的l例如“if（$（box）.hasClass（'colorized'））{$（box）.toggleClass（）}或诸如此类。试一试，我相信您一定能解决这个问题。
$("p.the-text").removeClass("colorized");