时间戳

首页 > 解决方案 > 如何使用多个按钮集更改单击时的按钮边框，以便仅影响一组

javascript - 如何使用多个按钮集更改单击时的按钮边框，以便仅影响一组

问题描述

我有多组按钮。每组有 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>

谢谢

标签： javascripthtmlcss

解决方案

您需要先导航到父级并删除其子级的类。

$(".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>

推荐阅读