Переключить класс только у одного родителя - PullRequest
Новая
       33

Переключить класс только у одного родителя

0 голосов
/ 10 июня 2018

У меня есть код ниже, который меняет класс выбора, так что пользователь может выбрать только один из всех вариантов.Когда на странице есть один набор продуктов, это легко сделать, но когда я представлю два или более наборов, пользователи могут выбрать только один из нескольких групп.

Мне нужен способ обеспечить переключение только классаприменяется в родительском div каждой кнопки.

Т.е. пользователь может выбрать кнопку 1 и кнопку 3, но не кнопки 1 и 2 или кнопки 3 и 4

Обновлено

Идентификаторы могут иметь только наборы продуктов

Сами товары и кнопки не могут иметь индивидуальные идентификаторы.

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>

Ответы [ 2 ]

0 голосов
/ 10 июня 2018

Пока ваша структура DOM остается простой, вы можете использовать функцию jQuery siblings(): 

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

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

0 голосов
/ 10 июня 2018

Ищите только другие кнопки в родительском элементе: 

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>

... но это увеличивает сложность разметки.: -)

...