Javascript eventListener没有按预期改变CSS

我有一个关于使用JavaScript事件监听器来改变某些元素的CSS样式的问题。Javascript eventListener没有按预期改变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"); 
     }

我想，如果“所有”选择的是，在每个项目上的颜色切换的点击课前恢复到原来的状态，以确保在事件侦听器。我在循环中添加了警报，以确保所有内容都正在触发，但是，如果用户选择某个项目，然后选中“全部”复选框，则颜色仍然不能正确重置。

来源

2017-08-24 Nick Codes

你为什么不使用复选框？标签可以看起来像按钮样式.... – epascarello

按钮是'漂亮'和团队，将使用它会喜欢他们，然后一个普通的形式 –

您的重置和点击调用切换....没有任何意义，应该被添加或删除.... – epascarello

答案很简单...你说你想删除类，而是你正在调用切换方法。

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

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

来源

2017-08-24 15:38:39 epascarello

Javascript eventListener没有按预期改变CSS

回答

相关问题