изменить стиль ближайшего класса, когда выбран радио вход - Javascript - PullRequest
Новая
       53

изменить стиль ближайшего класса, когда выбран радио вход - Javascript

0 голосов
/ 18 сентября 2018

Мне нужно сделать очень простую задачу, но я не могу ее понять.

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

Я не понимаю, как выбрать ближайший класс выбранной радиостанции.

Мой HTML выглядит такэто: 

<div class="box">
    <div class="box-content">
        <input type="radio" name="box-input">
        <label>Label One</label>
    </div>
</div>

<div class="box">
    <div class="box-content">
        <input type="radio" name="box-input">
        <label>Some Two</label>
    </div>
</div>

And so on...

<button onclick="submit()">Submit</button>

Если я так и сделаю: 

let boxes = document.querySelectAll('input');
const submit = () => {
    for (let i=0;i<boxes.length;i++) {
        boxes[i].checked? this.closest('.box').classList.add('selected'): console.log('nothing is selected')
    }
}

Это говорит о том, что this.closest - это undefined, и это работает, только если пользователь нажмет на кнопку отправки.

То, что я хочу сделать, это просто добавить класс в div .box, когда выбран радиовход, и удалить его при изменении состояния на невыбранное.

Я также хотел быпо возможности избегайте встроенного HTML «onclick».

Пожалуйста, используйте только чистый JavaScript

EDIT

С предложением @somethinghere я добавил onchange="change(this)"к каждому входному радио, и я меняю свой сценарий следующим образом: 

const change = el => {
    el.checked?el.closest('.box').classList.add('selected'):el.closest('.box').classList.remove('selected')
;

Это работает, добавляет класс selected, когда я нажимаю на радио входа.Но если я нажму на другой вход, то класс selected не будет удален.

Предложения?

Ответы [ 2 ]

0 голосов
/ 18 сентября 2018

Пока вы уже приняли ответ, я решил добавить альтернативный подход: 

// get a reference to the <button> element; here you only have the one <button>,
// so document.querySelector() will suffice (as it returns either the first
// Node that matches the supplied selector or null):
let submitButton = document.querySelector('button'),
  inputs = document.querySelectorAll('input');

// here we use the same Arrow function syntax, which does not - by design - get
// its own 'this' reference:
const submit = () => {

  // since we have the <input> elements already we use that, along with the
  // NodeList.prototype.forEach() method:
  inputs.forEach(
  
    // here 'input' is a reference to the current <input> element of the
    // NodeList of <input> elements over which we're iterating.
    // we use Element.closest() to find the relevant '.box' element, and
    // use the Element.classList API to toggle the 'hasSelected'
    // class-name based on the supplied 'switch', the 'input.checked'; if
    // 'input.checked' is true the class-name is added to the '.box', if
    // 'input.checked' is false the class-name is removed (if the class-name
    // is already present, or not-present, when it's added or removed no
    // error is thrown and it presents no problem):
    (input) => input.closest('.box').classList.toggle('hasSelected', input.checked)
  )
}

// using the EventTarget.addEventListener() method, in place of the obtrusive
// 'onclick' in-line event-handling; here we bind the submit() function 
// (note the deliberate lack of parentheses) as the event-handler for the
// 'click' event:
submitButton.addEventListener('click', submit);
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.5;
}

body>div {
  display: flex;
  justify-content: space-between;
  width: 50vw;
  margin: 1em auto;
}

div.box {
  display: grid;
  grid-template-columns: 1fr 30px;
  grid-gap: 0 10px;
  border: 2px solid transparent;
  padding: 0.5em;
  border-radius: 1em;
}

div.box.hasSelected {
  border-color: limegreen;
}

div.box.hasSelected::after {
  display: contents;
  content: '✓';
  font-weight: bold;
  color: limegreen;
}
<div>
  <div class="box">
    <div class="box-content">
      <label><input type="radio" name="box-input">
      Label One</label>
    </div>
  </div>

  <div class="box">
    <div class="box-content">
      <label><input type="radio" name="box-input">
      Some Two</label>
    </div>
  </div>

  <button>Submit</button>
</div>

JS Fiddle demo .

Ссылки:

0 голосов
/ 18 сентября 2018

Добавлен код для изменения стиля ближайшего класса при выборе входного радио 

var radioAll = document.querySelectorAll('input');

for(var i = 0; i < radioAll.length; i++) 
{
   radioAll[i].onclick = function() 
   {
      //remove selected class from all box classs
      var boxElems = document.querySelectorAll(".box");
      [].forEach.call(boxElems, function(el) {
         el.classList.remove("selected");
      });
      if(this.checked)
      {
         this.closest('.box').classList.add('selected');
      }    
    };
}
.selected{
background-color: coral;
}
<div class="box">
    <div class="box-content">
        <input type="radio" name="box-input">
        <label>Label One</label>
    </div>
</div>

<div class="box">
    <div class="box-content">
        <input type="radio" name="box-input">
        <label>Some Two</label>
    </div>
</div>

And so on...

<button onclick="submit()">Submit</button>
...