如何在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>

当我点击"#area-1“中的收音机时，我想删除"area-1”中的其他收音机中的"active- radio“类，而不是"area-2”中的类。

有很多div .area，所以我不想每次在脚本中指定div id。

联署材料：

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

基本上，我想选择所有的.input，其中包含与单击的收音机相同的.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>

​