Question

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

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

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

更新

只有产品集可以有ID

产品本身和按钮不具备个人ID

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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，在没有带无线电输入的脚本的情况下获取它：

示例：

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

仅在一个父级中切换班级

2 个答案: