定位包含切换的多个div，以单独更改单击时的样式

Question

在我的网络应用程序中，我有几行包含每行末尾的切换数据。在每个切换的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添加类。相反，只是针对最接近点击的.item-row的.toggle，并使用.closest()。

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

在这里查看更新的codepen。

Answer 2

如何调用父母来做这个伎俩;）

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