影响所有类的输入检查

Question

如何使用 jquery 添加 class 而不会影响分配给该 class 名称的所有 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

Working fiddle.

您还必须将当前对象 $(this) 与 loader 和 complete 一起使用，否则您将影响所有带有类 [=17= 的元素].

所以只需定义父级 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 2

与其修改应用于多个 div 的现有 class，不如创建一个新的 class 并添加一个 div。

Answer 3

就像您使用 $(this).closest(".row") 一样，您可以使用：

而不是 $('.loader')、$('.complete') 和 $('.error')

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

下面的演示：

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

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 4

演示：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();
...

本地代码片段：

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

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 5

How can I add a class using jquery without it affecting all divs assigned to that class name?

我想你的意思是我如何影响复选框的特定相关元素。

使用容器：

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

.red{
  background-color: red;
}

<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>

Answer 6

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

这里唯一的问题是 class 选择器从 DOM 中选择具有相同 class 名称的所有元素，这会更改您的两个复选框我避免使用它作为参考，因为它的参考会在 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)
   }
});

影响所有类的输入检查

Input check affecting all classes

html

javascript

jquery

dom-traversal

影响所有 类 的输入检查

Input check affecting all classes

html

javascript

jquery

dom-traversal

影响所有类的输入检查