jQuery에서 특수 div를 선택하는 방법

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", 나는에 다른 라디오 클래스 "액티브 라디오를"제거 할 "지역 - (I 무선 입력의 특별한 디자인을 가지고) 1 "이지만"영역 -2 "에는 없습니다.

div .area가 많아서 스크립트의 div id를 매번 지정하지 않으려합니다.

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'); 

기본적 I는 클릭 라디오와 같은 라디오 .area의 입력을 포함하는 모든 .input을 선택하고 싶다.

나는 문제가이 부분에서 오는 생각 :

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 스타일과 노 - 활성 클래스 라디오 입력에 다른 스타일을 가지고하지 않는 한 다음 더 활성이없는에서 아무 소용이 없다 수업. 활성 클래스를 추가 및 제거하고 CSS의 입력 [type = "radio"]에 직접 비활성 클래스의 스타일을 추가하십시오.