开关元件的onchange函数

Question

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

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

您必须使用原生.addEventListener /或使用jquery的.on

因此，不是

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

与Js一起使用第一个元素

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

或者使用jquery，将你的事件设置如下：

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

      //code stuff
 });

如果要将这最后一项应用于所有复选框：

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

例如a ->目标“a1”，它的输入目标数据-id- -> =“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>

​