Question

问题：

我有一组自定义复选框，显示为滑动开/关按钮。这些按钮切换其他元素的可见性。到目前为止，我已经使用常规复选框，带有onclick-function，可以检查所有设置，并更新元素的可见性。它工作得很好，但在制作滑动按钮，并将onclick功能移动到相应的复选框标签后，我的可见性更新是一次点击延迟。在实际检查复选框之前执行可见性更新。

问题： 如何更改执行的顺序，以便在切换复选框后执行可见性更新？

其他信息： 在我的开发早期，我使用了一个复选框onchange-listener，但它没有成功。在我的全尺寸系统中，我还实现了按钮，用于立即检查和取消选中所有复选框，并且onchange-listener将遍历我的可见性更新18次。每个复选框一次。花了太多时间。此外，我想避免摆脱按钮的动画，除了避免使用等待。

我在这个jsfiddle中重现了错误：http://jsfiddle.net/9n81ff1b/24/

我为双倍的javascript函数道歉。我无法让我的js在jsfiddle中工作，这是一个快速而肮脏的解决方案。我的实际项目中没有双重功能：

HTML：

<div class="onoffswitch"> 
<input type="checkbox" name="categorycheckbox" value="A" class="onoffswitch-checkbox" id="c1"> 
    <label class="onoffswitch-label" for="c1" onclick="updateSection()"> 
        <div class="onoffswitch-inner"> 
            <div class="onoffswitch-active"><div class="onoffswitch-switch"></div></div> 
            <div class="onoffswitch-inactive"><div class="onoffswitch-switch"></div></div> 
        </div>                                           
    </label>    
    </div>
    <div class="onoffswitch"> 
<input type="checkbox" name="categorycheckbox"  value="B" class="onoffswitch-checkbox" id="c2"> 
    <label class="onoffswitch-label" for="c2" onclick="updateSection()"> 
        <div class="onoffswitch-inner"> 
            <div class="onoffswitch-active"><div class="onoffswitch-switch"></div></div> 
            <div class="onoffswitch-inactive"><div class="onoffswitch-switch"></div></div> 
        </div>                                           
    </label>
        </div>

<div class="onoffswitch"> 
<input type="checkbox" name="categorycheckbox" value="C" class="onoffswitch-checkbox" id="c3"> 
    <label class="onoffswitch-label" for="c3" onclick="updateSection()"> 
        <div class="onoffswitch-inner"> 
            <div class="onoffswitch-active"><div class="onoffswitch-switch"></div></div> 
            <div class="onoffswitch-inactive"><div class="onoffswitch-switch"></div></div> 
        </div>                                           
    </label>    
    </div>

    <div class="colorbox A"> 1</div> 
    <div class="colorbox B"> 2</div> 
    <div class="colorbox C"> 3</div>

JS：（没有双倍功能）

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

function updateSection(){
    console.log("updatingSection");
    categories = [];
    $('input[name=categorycheckbox]').each(function() {
        if (this.checked) {
            categories.push(this.value);
        }
    });


    $('.colorbox').each(function(index, element) {
        var visible = true;
        var currentElement = element;
        if (!hasClassOfArray(currentElement, categories)){
            visible = false;
            };  

        $(currentElement).toggle(visible);
    });
}


function hasClassOfArray(element, classes) {
        for (var i = 0, j = classes.length; i < j; i++) {
            if (hasClass(element, classes[i])) {
                return true;
            }
        }
        return false;
    }
function hasClass(element, cls) {
        return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
    }

CSS：

.onoffswitch {
    position: relative; width: 90px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #34C134; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #E3E3E3; color: #999999;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 18px; margin: 6px;
    background: #FFFFFF;
    border: 2px solid #999999; border-radius: 20px;
    position: absolute; top: 0; bottom: 0; right: 56px;
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}

.colorbox{
    height: 64px;
    width: 64px;
}

.A{
    background: yellow;
}

.B{
    background: green;
}

.C{
    background: red;
}

Answer 1

仅将onclick属性转移到复选框本身，而不是标签，解决了问题。

Answer 2

而不是使用标签的onclick事件，请使用输入元素的onchange事件

<input type="checkbox" name="categorycheckbox" value="A" class="onoffswitch-checkbox" id="c1" onchange="updateSection()">

http://jsfiddle.net/9n81ff1b/27/

因为一旦您单击标签，您的脚本就会在输入实际更改之前运行。使用输入元素onchange事件可以解决该问题

具有onclick功能的自定义复选框在实际切换复选框之前执行功能

2 个答案: