如何更改按钮边框点击多个按钮集，所以只有一个集受到影响

Question

我有多组按钮。每组有2个按钮-一个是活动的(有边框)，另一个是非活动的(没有边框)。我目前的解决方案关闭了所有设置中的所有活动按钮，而它应该只影响其设置中的一个。知道怎么解吗?

$(".MobileSwitcherButton").click(function() {
$(".MobileSwitcherButton").removeClass("active");
$(this).addClass("active");
});

.MobileSwitcherButton {border: none;}
.MobileSwitcherButton.active {border: 1px solid black;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="set1">
<img src="https://www.pracovnivozidla.cz/wp-content/uploads/2016/06/Delivery-Icon.png" alt="" class="MobileSwitcherButton active" 
id="MobileSwitcherButton1"/>
<img src="https://www.pracovnivozidla.cz/wp-content/uploads/2016/06/Delivery-Icon.png" 
alt="" class="MobileSwitcherButton"  id="MobileSwitcherButton2"/>
</div>
<div id="set2">
<img src="https://www.pracovnivozidla.cz/wp-content/uploads/2016/06/Delivery-Icon.png" alt="" class="MobileSwitcherButton active" 
id="MobileSwitcherButton1"/>
<img src="https://www.pracovnivozidla.cz/wp-content/uploads/2016/06/Delivery-Icon.png" 
alt="" class="MobileSwitcherButton"  id="MobileSwitcherButton2"/>
</div>

谢谢

Answer 1

你需要先导航到父类，然后移除它的子类。

$(".MobileSwitcherButton").click(function() {
$(this).parent().find(".MobileSwitcherButton").removeClass("active");
$(this).addClass("active");
});

.MobileSwitcherButton {
border: none;
}
.MobileSwitcherButton.active {
border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="set1">
<img src="https://www.pracovnivozidla.cz/wp-content/uploads/2016/06/Delivery-Icon.png" alt="" class="MobileSwitcherButton active" id="MobileSwitcherButton1" />
<img src="https://www.pracovnivozidla.cz/wp-content/uploads/2016/06/Delivery-Icon.png" alt="" class="MobileSwitcherButton" id="MobileSwitcherButton2" />
</div>
<div id="set2">
<img src="https://www.pracovnivozidla.cz/wp-content/uploads/2016/06/Delivery-Icon.png" alt="" class="MobileSwitcherButton active" id="MobileSwitcherButton1" />
<img src="https://www.pracovnivozidla.cz/wp-content/uploads/2016/06/Delivery-Icon.png" alt="" class="MobileSwitcherButton" id="MobileSwitcherButton2" />
</div>

Answer 2

不是在图像上设置事件处理程序，而是在div父元素上设置它。这将允许您处理单个集合，而不是一次处理所有集合。

然后，在该处理程序中，查找图像(在事件被处理的div中)并从中删除所有.active类。

最后，将.active类添加回生成事件的元素。

// Set up the handler on the various image set containers
$("div[id^='set']").click(function(event) {
// Find all the images within the container that handled the click
$(".MobileSwitcherButton", this.closest("div")).removeClass("active");
$(event.target).addClass("active"); // Add the class to the event originator
});

.MobileSwitcherButton {border: none;}
.MobileSwitcherButton.active {border: 1px solid black;}
/* Only added to show more sets on one screen for demo: */
img { width:40px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="set1">
<img src="https://www.pracovnivozidla.cz/wp-content/uploads/2016/06/Delivery-Icon.png" alt="" class="MobileSwitcherButton active">
<img src="https://www.pracovnivozidla.cz/wp-content/uploads/2016/06/Delivery-Icon.png" alt="" class="MobileSwitcherButton">
</div>
<div id="set2">
<img src="https://www.pracovnivozidla.cz/wp-content/uploads/2016/06/Delivery-Icon.png" alt="" class="MobileSwitcherButton active">
<img src="https://www.pracovnivozidla.cz/wp-content/uploads/2016/06/Delivery-Icon.png" alt="" class="MobileSwitcherButton">
</div>
<div id="set3">
<img src="https://www.pracovnivozidla.cz/wp-content/uploads/2016/06/Delivery-Icon.png" alt="" class="MobileSwitcherButton active">
<img src="https://www.pracovnivozidla.cz/wp-content/uploads/2016/06/Delivery-Icon.png" alt="" class="MobileSwitcherButton">
</div>
<div id="set4">
<img src="https://www.pracovnivozidla.cz/wp-content/uploads/2016/06/Delivery-Icon.png" alt="" class="MobileSwitcherButton active">
<img src="https://www.pracovnivozidla.cz/wp-content/uploads/2016/06/Delivery-Icon.png" alt="" class="MobileSwitcherButton">
</div>