javascript - 定位包含切换的多个 div，以分别更改单击时的样式

Question

在我的网络应用程序中，我有几行包含数据，每行末尾都有切换。在每次切换的点击时，它应该改变整行和内容的不透明度。

我在 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');
    }
});

查看更新的 codepen在这里。