Как я могу проверить на наличие одинакового значения value в теги и добавить класс?

Question

Есть блок html

<div class="attr">
  <div class="container">
    <div class="box">
      <button class="btn radio" value="1">s</button>
      <button class="btn radio" value="2">m</button>
      <button class="btn radio" value="3">xl</button>
    </div>
    <div class="box">
        <button class="btn color" value="1">red</button>
        <button class="btn color" value="2">black</button>
        <button class="btn color" value="3">green</button>
      </div>
  </div>
</div>

Не могу понять как правильно написать проверку, чтобы при клике на button с одинаковыми value добавлялся класс active

Понимаю что можно класс radio сравнивать с color

$(".btn").each(function() {
  let BtnRadio = $('.btn.radio').attr("value");
  let BtnColor = $('.btn.color').attr("value");

  if ($(BtnRadio) === $(BtnColor)) {
    $(this).addClass("active");
  }
});

This это же должно быть у нас .btn? или я не туда иду? ну чето не так (

Answer 1

$('.btn').click(function(){
  $('.btn').removeClass('active');
  $(`.btn[value="${this.value}"]`).addClass('active');
});

.active {
  color: red;
}

.btn:not(.active){
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="attr">
  <div class="container">
    <div class="box">
      <button class="btn radio" value="1">s</button>
      <button class="btn radio" value="2">m</button>
      <button class="btn radio" value="3">xl</button>
    </div>
    <div class="box">
        <button class="btn color" value="1">red</button>
        <button class="btn color" value="2">black</button>
        <button class="btn color" value="3">green</button>
      </div>
  </div>
</div>

Answer 2

$(document).on('click', 'button.radio', function() {
    let value = $(this).val();
    $('.btn.color').removeClass('active');
    $(`.btn.color[value=${value}]`).addClass('active');
});

.btn.color.active {
  background: blue;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="attr">
  <div class="container">
    <div class="box">
      <button class="btn radio" value="1">s</button>
      <button class="btn radio" value="2">m</button>
      <button class="btn radio" value="3">xl</button>
    </div>
    <div class="box">
        <button class="btn color" value="1">red</button>
        <button class="btn color" value="2">black</button>
        <button class="btn color" value="3">green</button>
      </div>
  </div>
</div>

БЛОГ НА HUSL

Как я могу проверить на наличие одинакового значения value в теги и добавить класс?

Ответы (2 шт):