切换元素的onchange函数

Question

当我使用函数initSwitchery2时，在选中.js-switch-7时，我无法更改.js-check-change-field-7 forchange事件的文本。

$(document).ready(function() { 
    handleSwitcheryElements(); 
}); 


function initSwitchery2($class, $color, $speed, $size, $secondarycolor, $class2) { 
    var elems = Array.prototype.slice.call(document.querySelectorAll($class)); 
    var changeFields = Array.prototype.slice.call(document.querySelectorAll($class2)); 
     elems.forEach(function(el) { 
       if ($(el).data('switchery') != true) { 
        new Switchery(el, { color: $color, speed: $speed, size: $size, secondaryColor: $secondarycolor }); 
       } 
      }); 
     elems.onchange = function() { 
       if ($($class).is(':checked')) { 
        changeFields.innerText = "Afficher"; 
        $($class2).removeClass("btn-danger").addClass("btn-success"); 
       } else { 
        changeFields.innerText = "Masquer"; 
        $($class2).removeClass("btn-success").addClass("btn-danger"); 
       } 
      }; 
     } 


handleSwitcheryElements = function() { 
    initSwitchery2('.js-switch-7', '#00ACAC', '0.3s', 'small', '#ff5b57', '.js-check-change-field-7'); 
}; 


--html-- 

<input type="checkbox" data-render="switchery" data-theme="blue" class="js-switch-7 text-right" data-change="check-switchery-state-text" /> 
<a href="#" class="btn btn-xs btn-danger disabled m-l-5 js-check-change-field-7" data-id="switchery-state-text">Masquer</a> 

Answer 1

你必须通过设置

elems[0].onchange = function() { 
    //code stuff 
} 

或者使用jQuery使用本地.addEventListener /或.on使用jQuery

所以不是

elems.onchange = function() { 
    ..... 
} 

将JS使用的第一个元素你的活动如下：

$(elems).on("change" , function() { 

     //code stuff 
}); 

如果你想最后这适用于所有的复选框：

添加一个唯一的ID为每个a元素，并添加这最后的数据属性为您输入

例子a -> id =“a1”它的输入 - > data-id-target =“a1”等等。

娄一个工作示例：

$(document).ready(function() { 
 
    handleSwitcheryElements(); 
 
}); 
 

 

 
function initSwitchery2($class, $color, $speed, $size, $secondarycolor) { 
 
    var elems = Array.prototype.slice.call(document.querySelectorAll($class)); 
 
    
 
     elems.forEach(function(el) { 
 
       if ($(el).data('switchery') != true) { 
 
        
 
        new Switchery(el, { color: $color, speed: $speed, size: $size, secondaryColor: $secondarycolor }); 
 
        
 
        el.onchange = function(e) { 
 
         if ($(this).is(':checked')) { 
 
          $("#"+$(this).data("id-target")).html("Afficher"); 
 
          $("#"+$(this).data("id-target")).removeClass("btn-danger").addClass("btn-success"); 
 
         } else { 
 
          $("#"+$(this).data("id-target")).html("Masquer"); 
 
          $("#"+$(this).data("id-target")).removeClass("btn-success").addClass("btn-danger"); 
 
         } 
 
        } 
 
        
 
       } 
 
      }); 
 
     } 
 

 

 
handleSwitcheryElements = function() { 
 
    initSwitchery2('.js-switch-7', '#00ACAC', '0.3s', 'small', '#ff5b57'); 
 
    
 
};

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.js"></script> 
 
<div> 
 
<input type="checkbox" data-render="switchery" data-theme="blue" class="js-switch-7 text-right" data-change="check-switchery-state-text" data-id-target="a1" /> 
 
<a href="#" class="btn btn-xs btn-danger disabled m-l-5 js-check-change-field-7" data-id="switchery-state-text" id="a1">Masquer</a> 
 
</div> 
 
<div> 
 
<input type="checkbox" data-render="switchery" data-theme="blue" class="js-switch-7 text-right" data-change="check-switchery-state-text" data-id-target="a2" /> 
 
<a href="#" class="btn btn-xs btn-danger disabled m-l-5 js-check-change-field-7" data-id="switchery-state-text" id="a2">Masquer</a> 
 
</div> 
 
<div> 
 
<input type="checkbox" data-render="switchery" data-theme="blue" class="js-switch-7 text-right" data-change="check-switchery-state-text" data-id-target="a3" /> 
 
<a href="#" class="btn btn-xs btn-danger disabled m-l-5 js-check-change-field-7" data-id="switchery-state-text" id="a3">Masquer</a> 
 
</div> 
 
<div> 
 
<input type="checkbox" data-render="switchery" data-theme="blue" class="js-switch-7 text-right" data-change="check-switchery-state-text" data-id-target="a4" /> 
 
<a href="#" class="btn btn-xs btn-danger disabled m-l-5 js-check-change-field-7" data-id="switchery-state-text" id="a4">Masquer</a> 
 
</div>