如何在jQuery中选择特殊div

我的HTML代码如下所示。（我有无线输入的特殊设计）如何在jQuery中选择特殊div

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

基本上我想选择所有包含在同一.area的点击电台的无线电输入。输入。

我觉得从这个部分来的问题：

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

来源

2016-09-20 user3234809

它仅仅是一个错字， -active-radio'类？ – CDspace

不能连接一个jQuery对象和一个字符串。使用.find()查找与选择器匹配的元素。此外，active-radio类不在单选按钮的父母身上，它在单选按钮上，所以不要使用.parent()。

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

来源

2016-09-20 17:41:08 Barmar

尝试这样的：在点击的元素

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

来源

2016-09-20 17:41:38 buildok

'this（this）'''附近不需要'$（）'，它已经是一个jQuery对象了 – Barmar

它也可以工作 – buildok

是的，这会起作用，但是'$（）'在这里是多余的@buildok – Azim

限制您的搜索内容。

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>

来源

2016-09-20 17:49:03 Malk

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

*除非你有在电台输入不同的CSS样式和上无活动类的无线输入不同的风格则没有点在具有无活性类。只需添加和删除活动类，并将无活动类的样式直接添加到css中的输入[type =“radio”]。

来源

2016-09-20 18:00:38

如何在jQuery中选择特殊div

回答

相关问题