开关元件的 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 / 或 .on 使用 jquery

所以

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

与Js第一个元素一起使用

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

或使用 jquery 将您的活动设置为如下所示：

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

      //code stuff
 });

如果您想将最后一个应用于所有复选框：

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

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

开关元件的 onchange 函数

onchange function for switchery elements

html

javascript

jquery

switchery