定位包含div的多個div，以分別更改單擊時的樣式

Question

在我的Web應用程序中，我有幾行包含數據，每行末尾都有切換項。 click每個切換按鈕后，它應該更改整個行和內容的opacity 。

我在Codepen上做了一個簡化的版本： https ://codepen.io/anon/pen/xYeeyp

我面臨的問題是編寫JS分別針對div的狀態。 當前，當我單擊一行中的切換按鈕時，它會更改所有其他樣式。 我確實嘗試為每行使用單獨的ID，但是如果我有多行，那么在我的函數中會太亂了。 有沒有一種方法可以更改我的功能，以確保僅打開和關閉切換的行會更改其狀態？

我當前的JS代碼：

 $('.toggle').change(function(){
    if($(this).is(":checked")) {
    $('.item-row').addClass('disabled-view');
  } else {
    $('.item-row').removeClass('disabled-view');
 } 
});

Answer 1

發生這種情況是因為您要向所有.item-row添加類。 而是僅定位最接近單擊的.toggle的.item-row ，並為此使用.closest() 。

$('.toggle').change(function(){
    if($(this).is(":checked")) {
        $(this).closest('.item-row').addClass('disabled-view');
    } else {
        $(this).closest('.item-row').removeClass('disabled-view');
    }
});

請在此處查看更新的代碼筆 。

Answer 2

打電話給父母去做把戲;）

$('.toggle').change(function(){
if($(this).is(":checked")) {
        $(this).parent().addClass('disabled-view');
} else {
    $(this).parent().removeClass('disabled-view');
} });