Как выбрать специальный div в jQuery

Question

мой код HTML выглядит следующим образом. (У меня есть специальная конструкция ввода радио)

<div class="area" id="area-1"> 
<div class="input"> 
    <input type="radio" class="active-radio"> 
    <input type="radio" class="no-active-radio> 
    <input type="radio" class="no-active-radio> 
</div> 
</div> 
<div class="area" id="area-2"> 
<div class="input"> 
    <input type="radio" class="no-active-radio> 
    <input type="radio" class="active-radio"> 
    <input type="radio" class="no-active-radio> 
</div> 
</div> 

Когда я нажимаю на радио в «# зонной 1», я хочу, чтобы удалить класс «активное-радио» на других радиостанциях в «региональную 1 ", но не в" области-2 ".

Существует много div .area, поэтому я не хочу указывать каждый раз идентификатор div в моем скрипте.

JS:

var thisArea = this.closest(".area"); 
$(thisArea + " .input input[type='radio']").parent().removeClass('active-radio').addClass('no-active-radio'); 
$(this).addClass('active-radio').removeClass('no-active-radio'); 

В основном я хочу, чтобы выбрать все .Входной, которые содержат вход радио в том же .area, как щелкнул радио.

Я думаю, что проблема приходят из этой части:

thisArea + " .input input[type='radio']" 

Answer 1

Вы не можете сцепить объект JQuery и строку. Используйте .find(), чтобы найти элементы, соответствующие селектору. Кроме того, класс active-radio не принадлежит родителям переключателей, он находится на самих переключателях, поэтому не используйте .parent().

thisArea.find(".input :radio").removeClass('active-radio').addClass('no-active-radio'); 

Answer 2

попробовать так:

$(thisArea) 
    .find(".input input[type='radio']") 
    .parent() 
    .removeClass('active-radio') 
    .addClass('no-active-radio'); 

Answer 3

Предел поиска контекст для щелкнули элемента.

Array 
 
    .from(document.querySelectorAll('.area')) 
 
    .forEach(a => a.addEventListener('click', clickFun, false)); 
 

 

 
function clickFun(e) { 
 
    Array 
 
    .from(e.target.querySelectorAll('[type=radio]')) 
 
    .forEach(a => { 
 
     a.classList.toggle('no-active-radio'); 
 
     a.classList.toggle('active-radio'); 
 
    }) 
 
    };

.area { 
 
    display:block; 
 
    background-color:#a0a0a0; 
 
    padding:20px; 
 
    margin:20px; 
 
} 
 

 
input[type=radio].active-radio { 
 
    zoom:2; 
 
}

<div class="area" id="area-1"> 
 
<div class="input"> 
 
    <input type="radio" class="active-radio"> 
 
    <input type="radio" class="no-active-radio"> 
 
    <input type="radio" class="no-active-radio"> 
 
</div> 
 
</div> 
 
<div class="area" id="area-2"> 
 
<div class="input"> 
 
    <input type="radio" class="no-active-radio"> 
 
    <input type="radio" class="active-radio"> 
 
    <input type="radio" class="no-active-radio"> 
 
</div> 
 
</div>

Answer 4

thisArea.find('input[type="radio"]').removeClass('active-radio'); 
$(this).addClass('active-radio'); 

* Если у Вас есть различные стили CSS на входах радио и различные типы на радио входов с не-активным классом, то нет никакого смысла в не имеющем не активном класс. Просто добавьте и удалите активный класс и добавьте стили неактивного класса непосредственно на вход [type = "radio '] в css.