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

类型：功能（整数索引，元素元素）

为每个匹配元素执行的函数。

因此，您可以修改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 个答案: