javascript - Toggle 仅在一位家长中上课

Question

我有下面的代码来更改选择的类别，以便用户只能从所有选项中选择一个。当每页只有一组产品时，这很容易完成，但当我引入两组或更多组时，用户只能在多个组中选择一个。

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

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

已更新

只有产品集可以有 ID

产品本身以及按钮不能有单独的 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>

<小时/>

或者，如 David Thomas pointed out ，无需使用 radio 输入的脚本即可获取它:

示例:

.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>

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