在javascript中更改所有按钮的背景颜色

Question

我这里有一个代码，可以让我更改按钮的颜色。对我来说奇怪的是它只改变了一个按钮而不是所有按钮。但我想让它在同一个站点上改变所有这些。 这是一个带有 HTML 的 codepen 代码：https://codepen.io/akincakiner/pen/EExxMe

/*Set your own color*/
var jscolor;
var defaultColor = (localStorage.getItem("color")) ? localStorage.getItem("color"): "#0078c0";

window.addEventListener("load", startup, false);
function startup() {
  jscolor = document.querySelector(".jscolor");
  if (jscolor) {
    jscolor.value = defaultColor;
    jscolor.addEventListener("input", updateFirst, false);
    jscolor.addEventListener("change", updateAll, false);
    jscolor.select();
  }
  refreshSidebar(defaultColor);
}

function updateFirst(event) {
  refreshSidebar(event.target.value);
}

function refreshSidebar(color) {
  var side = document.querySelector(".themecolor");
  var bgColor = document.querySelector(".bgcolor");
  var text = document.querySelector(".onlyTextColor");
  if (side, bgColor, text) {
    side.style.backgroundColor = color;
    bgColor.style.backgroundColor = color;
    text.style.color = color;
  }
}

function updateAll(event) {
  localStorage.setItem('color', event.target.value);
  $(".themecolor, .bgcolor, .onlyTextColor").each(function(index, element){
    if($(element).hasClass("onlyTextColor")){
      $(element).css('color',event.target.value)
    }
    else{
      $(element).css('background-color', event.target.value);
    }
  });
}

Answer 1

如果您使用 jQuery，只需使用 jQuery 编写 - 如果可能，请不要与原生 JS 结合使用。否则你会混淆你对 jQuery 的学习。

演示：http://jsbin.com/zurebutugi/edit?html,js,output

$(function(){
    var defaultColor = (localStorage.getItem("color")) ? localStorage.getItem("color") : "#0078c0";

    function chColor(color){
      $(".themecolor, .bgcolor").css("background-color", color);
      $(".onlyTextColor").css("color", color);
      localStorage.setItem("color", color);
    }
  
    chColor(defaultColor);
  
    $("#theming-color").change(function(){
      chColor($(this).val());
    })
    .val(defaultColor)
    .css("background-color", defaultColor);

    
});

Answer 2

如果没有页面的 html 部分，我们只能猜测发生了什么。但我认为问题出在这个 html 部分。

因为如果我将您的代码放入测试中，其中 html 部分看起来像这样，它就会像预期的那样工作。

function updateAll() {
  //localStorage.setItem('color', event.target.value);
  $(".somebuttons, .bgcolor, .onlyTextColor").each(function(index, element){
    if($(element).hasClass("onlyTextColor")){
      $(element).css('color','red')
    }
    else{
      $(element).css('background-color', 'red');
    }
  });
}

$('#colorMyButtons').on('click', updateAll);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="colorMyButtons">color my buttons</button>
<br><br>
<button id="btn01" class="somebuttons">btn01</button><br>
<button id="btn02" class="somebuttons">btn02</button><br>
<button id="btn03" class="bgcolor">btn03</button><br>
<button id="btn04" class="bgcolor">btn04</button><br>
<button id="btn05" class="onlyTextColor">btn05</button><br>
<button id="btn06" class="onlyTextColor">btn06</button><br>