如何 select 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" 中其他收音机上的 class "active-radio"，但不删除 [=32] 中的 class "active-radio" =].

有很多 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');

基本上我想 select 所有包含无线电输入的 .input 与点击的无线电位于相同的 .area 中。

我认为问题出在这部分：

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

Answer 1

您不能连接 jQuery 对象和字符串。使用 .find() 查找与选择器匹配的元素。此外，active-radio class 不在单选按钮的父级上，它在单选按钮本身上，所以不要使用 .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 样式，并且在无活动的无线电输入上有不同的样式 class 那么没有活动的 [=15] 是没有意义的=].只需添加和删除活动 class 并将非活动 class 的样式直接添加到 css.

中的 input[type="radio']

如何 select jQuery 中的特殊 div

How to select a special div in jQuery

jquery

jquery-selectors