无法使用颜色选择器更改超过一种 1 按钮颜色

Question

我这里有一个代码，允许我使用颜色选择器更改边栏或按钮等元素的颜色。数据保存在localstorage。

奇怪的是这段代码只允许我更改同一项目之一的颜色。例如。在一个有 5 个按钮的页面上。只有一个按钮改变颜色，其他按钮保持自己的颜色。但是我想把所有的5个按钮都改掉

这是我用 html 制作的示例，您可以看到 3 个按钮中的 1 个只获得了一种颜色：https://codepen.io/anon/pen/pLzvNO?editors=1010

/*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 text = document.querySelector(".onlyTextColor");
  var background = document.querySelector(".background");
  if (side, text, background) {
    side.style.backgroundColor = color;
    text.style.color = color;
    background.style.backgroundColor = color;
  }
}

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

Answer 1

整个问题都在您的 updateAll 函数中。

通过使用 $(this) 选择器，您是 selecting your current HTML element。

根据jQuery Docs

.each()

Type: Function( Integer index, Element element )

A function to execute for each matched element.

所以你可以修改你的updateAll函数来匹配下面的

function updateAll(event) {
  // Set color to local storage
  localStorage.setItem('color', event.target.value);
  // Loop through elements with 'themecolor' or 'background' classes
  $(".themecolor, .background").each(function(index, element){     
    // If element needs only text color change
    if($(element).hasClass("onlyTextColor")){
      // Change text color
      $(element).css('color',event.target.value)
    }
    // Else
    else{ 
      // Change background color
      $(element).css('background-color', event.target.value);
    }    
  });
}

无法使用颜色选择器更改超过一种 1 按钮颜色

Can't change more then one 1 button color with a color picker

html

javascript

jquery

color-picker

jscolor