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

回答

相關問題