jQuery脚本：如果有<；部门>；单击，对其中两个应用操作

我需要一些帮助来解决我的问题

我有两个多个

标签。假设这些是“.apple”和“.orange”。我有三个苹果和三个橘子。所有的苹果和桔子都按班级编号

当我单击specific.apple时，我的jQuery脚本将

'selected'

单词添加到它的类中

$('.apple1, .apple2, .apple3').on('click', function () {
    $(this).toggleClass('selected').siblings('.apple1, .apple2, .apple3').removeClass('selected');

HTML代码如下所示：

<div class="apple1 selected"></div> <!--If .apple1 was selected-->
<div class="apple2"></div>
<div class="apple3"></div>

<div class="orange1 selected"></div> <!--If .apple1 was selected-->
<div class="orange2"></div>
<div class="orange3"></div>

我想我需要一个IF语句来完成这项工作，但我对jQuery非常陌生，我不知道如何编写该语句来获取哪个。苹果（编号1、2或3）被单击并修改相同编号的类

---

提前感谢：）

您可以重构HTML以使用自定义的

数据-*

属性，然后使用像

apple

和

orange

这样的通用类：

<div class="apple" data-number="1"></div>
<div class="apple" data-number="2"></div>
<div class="apple" data-number="3"></div>

<div class="orange" data-number="1"></div>
<div class="orange" data-number="2"></div>
<div class="orange" data-number="3"></div>

---

演示：

首先找到单击元素的类并获取包含的编号。然后将“selected”类应用于click和相应的“.orange”元素：

$（文档）。在（'click'，'class^=apple]'上，函数（）{
$（'div'）.removeClass（'selected'）；
var i=$（this.attr（'class'）.replace（'apple'，''）；
$（this.addClass（'selected'）；
$（'[class=“orange'+i+'“]'）。addClass（'selected'）；
});
。所选{颜色：红色}

应用1
应用2
应用程序3
橘子1
橙子2
橙色3
您可以尝试以下方法


$（'.apple1.apple2.apple3'）。关于（'click'，函数（事件）{
$（'.orange'+event.target.id）.addClass（“活动”）；
$（'.+event.target.className）.addClass（“活动”）；
})
.apple1，
.apple2，
.应用程序3{
背景色：红色；
}
.orange1，
.orange2，
.橙色3{
背景颜色：橙色；
}
.主动{
背景颜色：蓝色；
}

自闭症
自闭症
自闭症






自闭症
自闭症
asd
如果看不到HTML，就很难知道如何遍历DOM，但现在我倾向于使用.find（）。我刚刚添加了HTML代码，您可以查看：）我正要建议使用数据-*但@tymeJV打败了我。
<div class="apple" data-number="1"></div>
<div class="apple" data-number="2"></div>
<div class="apple" data-number="3"></div>

<div class="orange" data-number="1"></div>
<div class="orange" data-number="2"></div>
<div class="orange" data-number="3"></div>

$(".apple, .orange").click(function() {
    var clickedClass = $(this).attr("class");
    var siblingClass = clickedClass == "orange" ? "apple" : "orange";
    var siblingNum = $(this).data("number");

    $(".orange, .apple").removeClass("active");
    $(this).toggleClass("active");
    $("." + siblingClass + "[data-number=" + siblingNum + "]").addClass("active");
});