影响所有类的输入检查

Question

如何使用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)
   }
});

My jsfiddle

Answer 1

就像您使用$(this).closest(".row")而不是$('.loader')，$('.complete')和$('.error')一样，您可以使用：

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

演示如下：

＆＃13;

＆＃13;

$('input:checkbox').change(function() {
  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(function() {
      container.find(".complete").addClass('active').delay(3300).fadeIn(300).delay(1000).fadeOut()
    }, 3100);
  } else {
    container.find('.loader').hide();
    container.find('.complete').hide();
    $('.overlay').hide();
    container.find(".error").addClass('active').fadeIn(300).delay(2000).fadeOut(200)
  }
});

＆＃13;

html,
body {
  height: 100%;
  width: 100%;
}

.container {
  width: 100%;
  background: #edf1f4;
}

.overlay {
  background: rgba(128, 128, 128, 0.5);
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.row {
  display: flex;
  background: #fcfcfc;
}

.highlight {
  z-index: 700;
  background: none;
  position: absolute;
}

.title {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}


/* toggle item  */

.toggle-item {
  text-align: right;
}

.toggle {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 60px;
  height: 34px;
}

.toggle input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  text-align: initial;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #0272B6;
}

input:focus+.slider {
  box-shadow: 0 0 1px #0272B6;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.toggle-label {
  font-size: 9px;
  line-height: 11px;
  letter-spacing: 0.56px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  display: inline-block;
}

.toggle-label:first-child {
  margin: 10px 8px 0 10px;
}


/* rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.toggle-container {
  display: inline-block;
}

.toggle-container:first-child {
  margin-right: 30px;
}

.toggle-title {
  font-weight: 400;
  display: inline-block;
  vertical-align: middle;
}


/* end of toggle item */

.loader {
  border: 2px solid #ccc;
  border-top: 2px solid #0272B6;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 2s linear infinite;
  vertical-align: middle;
  margin: 0 5px 0 0;
  display: none;
  position: relative;
}

.complete,
.error {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  position: relative;
  display: none;
}

.inactive {
  display: none;
}

.active {
  display: inline-block;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay"></div>
<div class="row">
  <!-- toggle 1 -->
  <div class="toggle-container">
    <div class="loader"></div>
    <div class="complete"><img src="https://s3.amazonaws.com/my-account-prototype/green-check.png" alt="complete"></div>
    <div class="error"><img src="https://s3.amazonaws.com/my-account-prototype/red-warning.png" alt="error"></div>
    <p class="toggle-title">Email</p>
    <label class="toggle" for="check-1">
        <input type="checkbox"id="check-1" class="checkmark">
        <div class="slider round data-usage">
         <span class="toggle-label">on</span><span class="toggle-label">off</span>
         </div>
     </label>
  </div>
  <!-- toggle 2 -->
  <div class="toggle-container">
    <div class="loader"></div>
    <div class="complete"><img src="https://s3.amazonaws.com/my-account-prototype/green-check.png" alt="complete"></div>
    <div class="error"><img src="https://s3.amazonaws.com/my-account-prototype/red-warning.png" alt="error"></div>
    <p class="toggle-title">Text</p>
    <label class="toggle" for="check-2">
        <input type="checkbox"id="check-2" class="checkmark">
        <div class="slider round data-usage">
          <span class="toggle-label">on</span><span class="toggle-label">off</span>  
        </div>
      </label>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

<强> Working fiddle

您也必须将当前对象$(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').change(function(){
  if($(this).prop('checked')==true){ 
    var parent_div = $(this).closest(".toggle-container");
    $(this).closest(".row").toggleClass('highlight', this.checked); 

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

    setTimeout(function(){
      parent_div.find(".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)
  }
});

html, body {
  height: 100%;
  width: 100%;
}
.container {
  width: 100%;
  background: #edf1f4;
}
.overlay {
    background: rgba(128,128,128,0.5);
    display: none;
    position: absolute;
    top: 0;
    right: 0; 
    bottom: 0;
    left: 0;
}
.row {
  display: flex;
  background: #fcfcfc;

}
.highlight {
  z-index: 700;
  background: none;
  position: absolute;
}

.title {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}


/* toggle item  */
.toggle-item {
  text-align: right;
}
.toggle {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 60px;
  height: 34px;
}
.toggle input {
  display:none;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  text-align: initial;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: #0272B6;
}
input:focus + .slider {
  box-shadow: 0 0 1px #0272B6;
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
} 
.toggle-label {
  font-size: 9px;
  line-height: 11px;
  letter-spacing: 0.56px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  display: inline-block;
}
.toggle-label:first-child {
  margin: 10px 8px 0 10px;
}
/* rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.toggle-container {
  display: inline-block;
}
.toggle-container:first-child {
  margin-right: 30px;
}
.toggle-title {
  font-weight: 400;
  display: inline-block;
  vertical-align: middle;
} 
/* end of toggle item */
.loader {
    border: 2px solid #ccc; 
    border-top: 2px solid #0272B6; 
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 2s linear infinite;
    vertical-align: middle;
    margin: 0 5px 0 0;
    display: none;
    position: relative;
}
.complete,
.error {
	width: 20px;
	height: 20px;
  vertical-align: middle;
  position: relative;
  display: none;
}
.inactive {
  display: none;
}
.active {
  display: inline-block;
}

 @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="overlay"></div>
<div class="row">
  <!-- toggle 1 -->
  <div class="toggle-container">
    <div class="loader"></div>
    <div class="complete"><img src="https://s3.amazonaws.com/my-account-prototype/green-check.png" alt="complete"></div>
    <div class="error"><img src="https://s3.amazonaws.com/my-account-prototype/red-warning.png" alt="error"></div>
    <p class="toggle-title">Email</p>
    <label class="toggle" for="check-1">
      <input type="checkbox"id="check-1" class="checkmark">
      <div class="slider round data-usage">
        <span class="toggle-label">on</span><span class="toggle-label">off</span>
      </div>
    </label>  
  </div>
  <!-- toggle 2 -->
  <div class="toggle-container">
    <div class="loader"></div>
    <div class="complete"><img src="https://s3.amazonaws.com/my-account-prototype/green-check.png" alt="complete"></div>
    <div class="error"><img src="https://s3.amazonaws.com/my-account-prototype/red-warning.png" alt="error"></div>
    <p class="toggle-title">Text</p>
    <label class="toggle" for="check-2">
      <input type="checkbox"id="check-2" class="checkmark">
      <div class="slider round data-usage">
        <span class="toggle-label">on</span><span class="toggle-label">off</span>  
      </div>
    </label>  
  </div>
</div>

Answer 3

DEMO：https://jsfiddle.net/fm9ko5xy/1/

您可以使用.eq()及其补充方法.index()

此行获取当前所选复选框的索引号

let inputIndex = $('input:checkbox').index($(this));

这些行（以及更多行）只是附加了.eq(inputIndex)方法，以告诉脚本要影响哪个特定元素。

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

本地代码段：

＆＃13;

＆＃13;

$('input:checkbox').change(function(){
 let inputIndex = $('input:checkbox').index($(this));
  if($(this).prop('checked')==true){ 
  $(this).closest(".row").toggleClass('highlight', this.checked); 
  
 

  $('.overlay').eq(inputIndex).fadeIn(300).delay(3000).fadeOut();
  $(".loader").eq(inputIndex).addClass('active').fadeIn(300).delay(3000).fadeOut();
  setTimeout(function(){
  $(".complete").eq(inputIndex).addClass('active').delay(3300).fadeIn(300).delay(1000).fadeOut()
  }, 3100);
   } else {
      $('.loader').eq(inputIndex).hide(); 
       $('.complete').eq(inputIndex).hide(); 
       $('.overlay').eq(inputIndex).hide(); 
      $(".error").eq(inputIndex).addClass('active').fadeIn(300).delay(2000).fadeOut(200)
   }
});

＆＃13;

html, body {
  height: 100%;
  width: 100%;
}
.container {
  width: 100%;
  background: #edf1f4;
}
.overlay {
    background: rgba(128,128,128,0.5);
    display: none;
    position: absolute;
    top: 0;
    right: 0; 
    bottom: 0;
    left: 0;
}
.row {
  display: flex;
  background: #fcfcfc;

}
.highlight {
  z-index: 700;
  background: none;
  position: absolute;
}

.title {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}


/* toggle item  */
.toggle-item {
  text-align: right;
}
.toggle {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 60px;
  height: 34px;
}
.toggle input {
  display:none;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  text-align: initial;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: #0272B6;
}
input:focus + .slider {
  box-shadow: 0 0 1px #0272B6;
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
} 
.toggle-label {
  font-size: 9px;
  line-height: 11px;
  letter-spacing: 0.56px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  display: inline-block;
}
.toggle-label:first-child {
  margin: 10px 8px 0 10px;
}
/* rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.toggle-container {
  display: inline-block;
}
.toggle-container:first-child {
  margin-right: 30px;
}
.toggle-title {
  font-weight: 400;
  display: inline-block;
  vertical-align: middle;
} 
/* end of toggle item */
.loader {
    border: 2px solid #ccc; 
    border-top: 2px solid #0272B6; 
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 2s linear infinite;
    vertical-align: middle;
    margin: 0 5px 0 0;
    display: none;
    position: relative;
}
.complete,
.error {
	width: 20px;
	height: 20px;
  vertical-align: middle;
  position: relative;
  display: none;
}
.inactive {
  display: none;
}
.active {
  display: inline-block;
}

 @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
} 

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay"></div>
<div class="row">
<!-- toggle 1 -->
  <div class="toggle-container">
      <div class="loader"></div>
      <div class="complete"><img src="https://s3.amazonaws.com/my-account-prototype/green-check.png" alt="complete"></div>
		  <div class="error"><img src="https://s3.amazonaws.com/my-account-prototype/red-warning.png" alt="error"></div>
      <p class="toggle-title">Email</p>
      <label class="toggle" for="check-1">
        <input type="checkbox"id="check-1" class="checkmark">
        <div class="slider round data-usage">
         <span class="toggle-label">on</span><span class="toggle-label">off</span>
         </div>
     </label>  
    </div>
    <!-- toggle 2 -->
    <div class="toggle-container">
       <div class="loader"></div>
      <div class="complete"><img src="https://s3.amazonaws.com/my-account-prototype/green-check.png" alt="complete"></div>
		  <div class="error"><img src="https://s3.amazonaws.com/my-account-prototype/red-warning.png" alt="error"></div>
      <p class="toggle-title">Text</p>
      <label class="toggle" for="check-2">
        <input type="checkbox"id="check-2" class="checkmark">
        <div class="slider round data-usage">
          <span class="toggle-label">on</span><span class="toggle-label">off</span>  
        </div>
      </label>  
    </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

  

如何使用jquery添加一个类，而不会影响分配给该类名的所有div？

我认为您的意思是如何影响复选框的特定相关元素。

使用容器：

＆＃13;

＆＃13;

$(document).ready(function(){
  $('input').on('click', function(){
    var $this = $(this);
    var $container = $this.closest('.mycontainer');
    var $related = $container.find('.related');
    $related.toggleClass('red');
  });
});

＆＃13;

.red{
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mycontainer">
       <input type="checkbox">
       <span class="related">Hello</span>
    </div>
    <div class="mycontainer">
       <input type="checkbox">
       <span class="related">Hello</span>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

使用此更改代码并检查它是否适合您。

这里唯一的问题是类选择器从DOM中选择具有相同类名的所有元素，这些元素会更改两个复选框 我避免使用它作为参考，因为它的引用会在setTimeout函数中改变。

$('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)
   }
});

Answer 6

不是修改应用于多个div的现有类，而是创建一个新类并添加一个div。