Question

我这里有一个代码，可以让我改变按钮的颜色。对我来说奇怪的是它只改变了一个按钮而不是所有这些按钮。但我想让它在同一个网站上改变所有这些。这是一个包含HTML的代码簿代码：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部分看起来像这样的测试中，它会像预期的那样工作。

＆＃13;

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);

＆＃13;

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

＆＃13;

在javascript中更改所有按钮background-color

2 个答案: