Javascript eventListener 未按预期更改 CSS

Question

我有一个关于使用 javascript 事件侦听器更改某些元素的 CSS 样式的问题。

目前我有一个带有 3 个样式按钮的表单，如下所示： 用户可以使用全选复选框选择 1、2 或全部 3。

<button type="button" class="myButton" id="skype">Skype ping</button>
<button type="button" class="myButton" id="returnedim">Returned IM</button>
<button type="button" class="myButton"id="complaint">CallerComplaint</button> 
 All of the above <input type="checkbox" value="all" name="all" id="allReasons">

<input type="hidden" name="contacthidden1" value="">                        
<input type="hidden" name="contacthidden2" value="">
<input type="hidden" name="contacthidden3" value="">

我的问题出现在“全部”选择​​上。它没有像我期望的那样应用 CSS。我有一个名为“clicked”的类，它将按钮的样式变为绿色，还有一个未点击的类，将其变为原始颜色。

我遇到的问题是，用户可以选择一个或两个项目并应用单击的类颜色，然后如果单击“全部”，它会抛出 css 样式不正常，某些按钮的样式为绿色，而有些则不是.

这里是有问题的代码：

 var contactArray = ["skype", "returnedim", "complaint"];

    document.getElementById('allReasons').addEventListener('change', function() {
            if (document.getElementById("allReasons").checked == true) {

                //If 'All' is checked then any previously checked items should be reset to default state first

                for (var i = 0, len=contactArray.length; i<len; i++){
                   resetClickedClass(contactArray[i]);
                    alert('1');
                   setClickedClass(contactArray[i]);
                    alert('2');
                }

                $('input[name=contacthidden1]').val("Skype Ping");
                $('input[name=contacthidden2]').val("Returned IM");
                $('input[name=contacthidden3]').val("Caller Complaint");
            } else {
                //Reset values to nothing when unchecked
                for (var i = 0, len=contactArray.length; i<len; i++){
                    resetClickedClass(contactArray[i]);
                }
                $('input[name=contacthidden1]').val("");
                $('input[name=contacthidden2]').val("");
                $('input[name=contacthidden3]').val("");
            }
        })

        function resetClickedClass(selector){
            $("#" + selector).toggleClass("unclicked");
        }

        function setClickedClass(selector){
            $("#" + selector).toggleClass("clicked");
        }

如果选择了“全部”，我想确保在事件侦听器中，在切换单击的类之前，每个项目的颜色都重置为原始状态。我在循环中添加了警报，以确保一切正常，但是如果用户选择了一个项目，那么颜色仍然没有正确重置，然后是“全部”复选框。

Answer 1

答案很简单...您说要删除该类，但您调用的是切换方法。

    function resetClickedClass(selector){
        $("#" + selector).toggleClass("unclicked");  <-- should be removeClass
    }

    function setClickedClass(selector){
        $("#" + selector).toggleClass("clicked");   <-- should be addClass
    }