Javascript 影响所有类的输入检查

如何使用jquery添加类而不影响分配给该类名的所有div？必须有一个简单的方法来解决这个问题？我已经在使用

$（this）

进行输入检查，那么如何使该操作对其启用的切换唯一

$('input:checkbox').change(function(){
   if($(this).prop('checked')==true){ 
      $(this).closest(".row").toggleClass('highlight', this.checked); 
      $('.overlay').fadeIn(300).delay(3000).fadeOut();
      $(".loader").addClass('active').fadeIn(300).delay(3000).fadeOut();
      setTimeout(function(){
         $(".complete").addClass('active').delay(3300).fadeIn(300).delay(1000).fadeOut()
      }, 3100);
   } else {
      $('.loader').hide(); 
      $('.complete').hide(); 
      $('.overlay').hide(); 
      $(".error").addClass('active').fadeIn(300).delay(2000).fadeOut(200)
   }
});

.

您必须将当前对象

$（this）

与

loader

和

complete

一起使用，否则您将使用类

loader/complete

影响所有元素

因此，只需定义父div，然后通过更改

”.loader“

和

”.complete“

的两行来获取与其相关的元素，如：

var parent_div = $(this).closest(".toggle-container");

parent_div.find(".loader").addClass('active')...;

setTimeout(function(){
    parent_div.find(".complete").addClass('active')..
}, 3100);

希望这有帮助

$（'input:checkbox'）。更改（函数（）{
如果（$（this.prop（'checked'）==true）{
var parent_div=$（this）.closest（“.toggle container”）；
$（this.closest（“.row”）.toggleClass（'highlight'，this.checked）；
$（'.overlay'）.fadeIn（300）.delay（3000）.fadeOut（）；
父类查找（“.loader”）.addClass（'active'）.fadeIn（300）.delay（3000）.fadeOut（）；
setTimeout（函数（）{
父分区find（“.complete”）.addClass（'active'）.delay（3300）.fadeIn（300）.delay（1000）.fadeOut（）；
}, 3100);
}否则{
$（'.loader'）.hide（）；
$（'.complete'）.hide（）；
$（'.overlay'）.hide（）；
$（“.error”）.addClass（'active'）.fadeIn（300）.延迟（2000）.淡出（200）
}
});
html，正文{
身高：100%；
宽度：100%；
}
.集装箱{
宽度：100%；
背景：edf1f4；
}
.覆盖{
背景：rgba（1280,0.5）；
显示：无；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
}
.行{
显示器：flex；
背景:#fcfc；
}
.亮点{
z指数：700；
背景：无；
位置：绝对位置；
}
.头衔{
字体大小：16px；
字体大小：400；
线高：24px；
}
/*切换项*/
.切换项{
文本对齐：右对齐；
}
.切换{
位置：相对位置；
显示：内联块；
垂直对齐：中间对齐；
宽度：60px；
高度：34px；
}
.切换输入{
显示：无；
}
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
文本对齐：首字母；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入：选中+滑块{
背景色：#0272B6；
}
输入：焦点+.滑块{
盒影：0 0 1px#0272B6；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
} 
.切换标签{
字体大小：9px；
线高：11px；
字母间距：0.56px；
字号：600；
颜色：#fff；
文本转换：大写；
显示：内联块；
}
.切换标签：第一个孩子{
利润率：10px 8px 0 10px；
}
/*圆形滑块*/
.圆滑{
边界半径：34px；
}
.滑块.圆形：之前{
边界半径：50%；
}
.切换容器{
显示：内联块；
}
.切换容器：第一个子容器{
右边距：30px；
}
.切换标题{
字体大小：400；
显示：内联块；
垂直对齐：中间对齐；
} 
/*切换项结束*/
.加载器{
边框：2个实心#ccc；
边框顶部：2个实心#0272B6；
边界半径：50%；
宽度：24px；
高度：24px；
动画：旋转2s线性无限；
垂直对齐：中间对齐；
边距：0 5px 0 0；
显示：无；
位置：相对位置；
}
完成
.错误{
宽度：20px；
高度：20px；
垂直对齐：中间对齐；
位置：相对位置；
显示：无；
}
.不活跃{
显示：无；
}
.主动{
显示：内联块；
}
@关键帧旋转{
0%{变换：旋转（0度）；}
100%{变换：旋转（360度）；}
}

电子邮件
奥诺夫
文本

奥诺夫
不要修改应用于多个div的现有类，而是创建一个新类并添加到一个div上。
就像您正在使用的
$（this）。最近（“.row”）
，而不是
$（'.loader'）
，
$（'.complete'）
和
$（'.error'）
，您可以使用：

var container = $(this).closest(".toggle-container")
container.find('.loader')
container.find('.complete')
container.find('.error')

演示如下：


$（'input:checkbox'）。更改（函数（）{
var container=$（this）.closest（“.toggle container”）；
if（$（this.prop（'checked'））{
$（this.closest（“.row”）.toggleClass（'highlight'，this.checked）；
$（'.overlay'）.fadeIn（300）.delay（3000）.fadeOut（）；
container.find（“.loader”）.addClass（'active'）.fadeIn（300）.delay（3000）.fadeOut（）；
setTimeout（函数（）{
container.find（“.complete”）.addClass（'active'）.delay（3300）.fadeIn（300）.delay（1000）.fadeOut（）
}, 3100);
}否则{
container.find（'.loader'）.hide（）；
container.find（'.complete'）.hide（）；
$（'.overlay'）.hide（）；
container.find（“.error”）.addClass（'active'）.fadeIn（300）.delay（2000）.fadeOut（200）
}
});
html，
身体{
身高：100%；
宽度：100%；
}
.集装箱{
宽度：100%；
背景：edf1f4；
}
.覆盖{
背景：rgba（128,128,128,0.5）；
显示：无；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
}
.行{
显示器：flex；
背景:#fcfc；
}
.亮点{
z指数：700；
背景：无；
位置：绝对位置；
}
.头衔{
字体大小：16px；
字体大小：400；
线高：24px；
}
/*切换项*/
.切换项{
文本对齐：右对齐；
}
.切换{
位置：相对位置；
显示：内联块；
垂直对齐：中间对齐；
宽度：60px；
高度：34px；
}
.切换输入{
显示：无；
}
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
文本对齐：首字母；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景-c
let inputIndex = $('input:checkbox').index($(this));

$('.overlay').eq(inputIndex).fadeIn(300).delay(3000).fadeOut();
$(".loader").eq(inputIndex).addClass('active').fadeIn(300).delay(3000).fadeOut();
...

$('input:checkbox').change(function(event){
var $this = $(event.target).closest('.toggle-container');
  if($(event.target).prop('checked')==true){ 
  $this.parents(".row").toggleClass('highlight', this.checked); 
  $this.find('.overlay').fadeIn(300).delay(3000).fadeOut();
  $this.find(".loader").addClass('active').fadeIn(300).delay(3000).fadeOut();
  setTimeout(function(){
  $this.find(".complete").addClass('active').delay(3300).fadeIn(300).delay(1000).fadeOut()
  }, 3100);
   } else {
      $this.find('.loader').hide(); 
       $this.find('.complete').hide(); 
       $this.find('.overlay').hide(); 
      $this.find(".error").addClass('active').fadeIn(300).delay(2000).fadeOut(200)
   }
});