仅在一个父项中切换 Class

Question

我有下面的代码可以更改 selection 的 class，这样用户只能 select 所有选项中的一个。当每页有一组产品时，这很容易做到，但是当我介绍两组或更多组时，用户只能 select 多个组之间的一个。

我需要一种方法来确保 class 的切换仅适用于每个按钮的父级 div。

即用户可以 select 按钮 1 和按钮 3 但不能按钮 1 和 2 或按钮 3 和 4

已更新

只有产品集可以有 ID

产品本身和按钮不能有div相同的 ID

var box = $(".Button");
box.click(function() {
  $(this).toggleClass("Green");
  box.not(this).removeClass("Green");
});

.Label {
  font-weight: 600;
  padding: 5%;
  font-size: 16px;
  float: center;
  position: relative;
}

.Button {
  font-weight: bold;
  font-size: 13px;
  background: #0096db;
  text-align: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 15px;
  color: #fff;
  position: static;
  float: left;
  min-width: 25%;
  max-width: 40%;
}

.Button.Green {
  background: #64B448;
  font-weight: bold;
  font-size: 13px;
  text-align: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 15px;
  color: #fff;
  position: static;
  float: left;
  min-width: 25%;
  max-width: 40%;
}

.productset1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 2fr));
  grid-template-rows: repeat(auto-fit, minmax(10px, 1fr));
  grid-gap: 5px;
}
.productset2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 2fr));
  grid-template-rows: repeat(auto-fit, minmax(10px, 1fr));
  grid-gap: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
  <span>Product Set 1</span>
</h1>

<div class="productset1">
  <div class="product">
  <span class="Button">
  <span class="Label">Button 1</span>
  </span>
  </div>
    <div class="product">
  <span class="Button">
  <span class="Label">Button 2</span>
  </span>
  </div>
    <div class="product">
  <span class="Button">
  <span class="Label">Button 3</span>
  </span>
  </div>
    <div class="product">
  <span class="Button">
  <span class="Label">Button 4</span>
  </span>
  </div>
</div>


<h1>
  <span>Product Set 2</span>
</h1>

<div class="productset2">
  <div class="product">
  <span class="Button">
  <span class="Label">Button 5</span>
  </span>
  </div>
    <div class="product">
  <span class="Button">
  <span class="Label">Button 6</span>
  </span>
  </div>
    <div class="product">
  <span class="Button">
  <span class="Label">Button 7</span>
  </span>
  </div>
      <div class="product">
  <span class="Button">
  <span class="Label">Button 8</span>
  </span>
  </div>

</div>

Answer 1

仅查找父项中的其他按钮：

var box = $(".Button");
box.click(function() {
  var $this = $(this);
  $this.toggleClass("Green");
  $this.parent().find(".Button").not(this).removeClass("Green");
});

示例：

var box = $(".Button");
box.click(function() {
  var $this = $(this);
  $this.toggleClass("Green");
  $this.parent().find(".Button").not(this).removeClass("Green");
});

.Button {
  font-weight: bold;
  font-size: 13px;
  background: #0096db;
  text-align: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 15px;
  color: #fff;
  position: static;
  float: right;
  min-width: 25%;
  max-width: 40%;
}

.Button.Green {
  background: #64B448;
  font-weight: bold;
  font-size: 13px;
  text-align: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 15px;
  color: #fff;
  position: static;
  float: right;
  min-width: 25%;
  max-width: 40%;
}

.productset1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 2fr));
  grid-template-rows: repeat(auto-fit, minmax(10px, 1fr));
  grid-gap: 5px;
}
.productset2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 2fr));
  grid-template-rows: repeat(auto-fit, minmax(10px, 1fr));
  grid-gap: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Product Set 1</h1>

<div class="productset1">
<span class="Button">Button 1</span>
<span class="Button">Button 2</span>
</div>

<h1>Product Set 2</h1>

<div class="productset2">
<span class="Button">Button 3</span>
<span class="Button">Button 4</span>
</div>

或者，如，通过无线电输入在没有脚本的情况下获取它：

示例：

.Button {
  font-weight: bold;
  font-size: 13px;
  background: #0096db;
  text-align: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 15px;
  color: #fff;
  position: static;
  float: right;
  min-width: 25%;
  max-width: 40%;
}

input[type=radio] {
  display: none;
}

input[type=radio]:checked + .Button {
  background: #64B448;
  font-weight: bold;
  font-size: 13px;
  text-align: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 15px;
  color: #fff;
  position: static;
  float: right;
  min-width: 25%;
  max-width: 40%;
}

.productset1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 2fr));
  grid-template-rows: repeat(auto-fit, minmax(10px, 1fr));
  grid-gap: 5px;
}
.productset2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 2fr));
  grid-template-rows: repeat(auto-fit, minmax(10px, 1fr));
  grid-gap: 5px;
}

<h1>Product Set 1</h1>

<div class="productset1">
<input id="btn1" type="radio" name="set1">
<label for="btn1" class="Button">Button 1</label>
<input id="btn2" type="radio" name="set1">
<label for="btn2" class="Button">Button 2</label>
</div>

<h1>Product Set 2</h1>

<div class="productset2">
<input id="btn3" type="radio" name="set2">
<label for="btn3" class="Button">Button 3</label>
<input id="btn4" type="radio" name="set2">
<label for="btn4" class="Button">Button 4</label>
</div>

...但它确实增加了标记的复杂性。 :-)

Answer 2

只要您的 DOM 结构保持简单，您就可以使用 jQuery 的 siblings() 功能：

var box = $(".Button");
box.click(function() {
   $(this).toggleClass("Green");
   $(this).siblings(".Button").removeClass("Green");
});

https://api.jquery.com/siblings/

仅在一个父项中切换 Class

Toggle Class Only in One Parent

html

javascript

jquery

parent

toggle