Как переключить класс метки, нажав переключатель. Ваниль JS нужна вместо JQuery - PullRequest
Новая
       10

Как переключить класс метки, нажав переключатель. Ваниль JS нужна вместо JQuery

1 голос
/ 15 января 2020

Я пытался написать функцию ванили js, которая добавляет класс .active к label из checked input. К сожалению, я застрял и смог написать эту функцию, используя jquery. Ниже приведен фрагмент кода.

Важно - html структура не может быть изменена. Никакой дополнительный класс не может быть добавлен. Входы должны быть в метках. Любое предложение написать то же самое в ванили js? Я знаю, что могу получить все inputs за один раз .querySelector и использовать, например, forEach, но, если щелкнуть по любому входу, он переключит класс в обоих form сразу.

Спасибо за помощь . 

let $fruits = $('.fruits');
let $vege = $('.vege');


const filterToggleActive = function ($filterName) {
 $inputs = $filterName.find('input');
 $inputs.each(function () {
  $(this).on('click', function () {
   $label = $filterName.find('label');
   $label.removeClass('active');
   $currentLabel = $(this).parent('label');
   $currentLabel.addClass('active');
  });
 });
}

filterToggleActive($fruits);
filterToggleActive($vege);
.fruits {
 border: 1px solid red;
 margin: 15px;
}

.vege {
 border: 1px solid green;
 margin: 15px;
}

label {
  font-size: 18px;
  cursor: pointer;
}
.active {
text-decoration: underline;
  font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fruits">
    <form action="">
      <label><input type="radio" name="food"> Apples</label>
      <label><input type="radio" name="food"> Bananas</label>
      <label><input type="radio" name="food"> Oranges</label>
    </form>
  </div>

  <div class="vege">
    <form action="">
      <label class="active"><input type="radio" name="food">Carrots</label>
      <label><input type="radio" name="food">Tomatos</label>
      <label><input type="radio" name="food"> Potatos</label>
    </form>
  </div>

1 Ответ

0 голосов
/ 15 января 2020

Вы можете сделать это всего лишь javascript. Вам понадобится querySelectorAll, так как querySelector - первое совпадение. 

var inputs = document.querySelectorAll("input");
inputs.forEach(function(i){
    i.addEventListener('click', function(el){
        var clicked = el.currentTarget;
        var active = clicked.parentElement.parentElement.querySelector('.active');
        active && active.classList.remove('active');
        clicked.parentElement.classList.add('active');
    });
});
.fruits {
 border: 1px solid red;
 margin: 15px;
}

.vege {
 border: 1px solid green;
 margin: 15px;
}

label {
  font-size: 18px;
  cursor: pointer;
}
.active {
text-decoration: underline;
  font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fruits">
    <form action="">
      <label><input type="radio" name="food"> Apples</label>
      <label><input type="radio" name="food"> Bananas</label>
      <label><input type="radio" name="food"> Oranges</label>
    </form>
  </div>

  <div class="vege">
    <form action="">
      <label class="active"><input type="radio" name="food">Carrots</label>
      <label><input type="radio" name="food">Tomatos</label>
      <label><input type="radio" name="food"> Potatos</label>
    </form>
  </div>
...