颜色选择器按钮是 svg 并且被更改的元素也是 svg 的问题
Issue with color picker button being an svg and the element being changed also svg
我正在尝试制作一个颜色选择器，其中按钮或颜色选项是 SVG 元素，单击时，它们会更改另一个 SVG 的填充颜色。我不太确定为什么代码不起作用。我确保以正确的 class 为目标，并确保 class 在包含填充样式的 SVG 部分中......我不知道为什么我的代码在Stack 但这里有一个 link 到我的 CodePen https://codepen.io/maddylobb/pen/oNormML 感谢任何和所有的帮助！
var colorArray = ["#8ecae6", "#219ebc", "#023047", "#ffb703", "#fb8500"];
var colorButtons = document.querySelectorAll(".colors-svg");
var content = document.querySelector(".colors-svg-main");
function buidPickerOptions() {
colorButtons.forEach((button, i) => {
// set the fill color of each button
button.style.fill = colorArray[i];
button.addEventListener("click", () => {
// set the fill color from the button that is clicked
content.style.fill = colorArray[i];
})
});
}
#content {
background-color: #219ebc;
height: 100vh;
//position: relative;
width: 100vw;
#color-change-element {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
#s-7 {
max-height: 400px;
}
}
#select-container {
background-color: #fff;
left: 0;
overflow: hidden;
padding: 20px;
position: fixed;
top: 40%;
width: 200px;
#select-bottom {
height: 40px;
ul {
background-color: #fff;
display: flex;
height: 100%;
justify-content: space-between;
width: 100%;
li {
list-style: none;
cursor: pointer;
height: 30px;
margin-bottom: 10px;
width: 30px;
}
}
#colors {
height: 100%;
left: 0;
top: 0;
width: 100%;
}
}
}
}
<section id="content">
<div id="color-change-element">
<svg id="s-7" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 76">
<g clip-path="url(#clip0_187_4)">
<path d="M0 0h79v76H0z"/>
<path class="color-svg-main" d="M40.39 5.987c.645-1.918 1.278-4.159 3.167-4.975a3.71 3.71 0 0 1 2.89.018c.845.418 1.8 1.419 2.295 4.77.496 3.352.047 6.078-.36 8.676-1.678 10.564-1.119 12.164-.25 13.096.49.522 1.16 1.357 4.56 1.32 7.11-.078 14.25 1.14 21.322.391a3.696 3.696 0 0 1 2.35.424 4.248 4.248 0 0 1 1.443 1.713c.319.69.445 1.45.367 2.206-.305 2.303-3.064 3.59-6.266 5.045a38.866 38.866 0 0 1-8.528 2.64c-2.73.468-5.947.675-8.55 1.622-1.034.336-1.871 1.119-2.505 1.999-.364.541-.533 1.798-.557 3.575-.032 2.539.717 3.547 2.162 8.091.469 1.855.568 2.238.966 3.498.49 1.45 1.023 2.798 1.738 4.151a22.785 22.785 0 0 1 2.142 8.493 2.313 2.313 0 0 1-.51 1.756c-.823.8-2.435.328-2.987.169-4.2-1.22-8.15-9.012-14.983-16.397-1.464-1.58-3.44-3.547-6.181-3.707-1.431-.082-2.736.34-4.638 1.43-5.449 3.104-8.213 7.284-13.99 11.734-.727.556-2.34 1.76-4.334 1.582-.19.004-2.289-.228-2.925-1.597-.724-1.551.767-3.653 1.682-4.942 7.65-10.806 9.189-13.277 10.174-16.288.717-2.173 1.622-5.08.46-7.999-.609-1.515-1.664-2.76-5.742-5.41-8.222-5.343-12.67-5.967-13.247-9.28a3.786 3.786 0 0 1 .94-3.339c1.344-1.204 3.545-.333 9.09 1.46 4.312 1.394 8.59 2.675 13.465 3.017a8.332 8.332 0 0 0 4.749-.741c1.892-.982 2.774-2.6 3.803-4.527 3.985-7.494 5.98-11.25 6.788-13.674Z" fill="#F366CC" stroke="#fff" stroke-width="2" stroke-miterlimit="10"/>
</g>
<defs>
<clipPath id="clip0_187_4">
<path fill="#fff" d="M0 0h79v76H0z"/>
</clipPath>
</defs>
</svg>
</div>
<div id="select-container">
<section id="select-top">
<h1>Select One:</h1>
<!-- <div>
<button class="selected">Colors</button>
</div> -->
</section>
<div id="select-bottom">
<section id="colors">
<ul>
<li><svg id="s-7" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 76">
<g clip-path="url(#clip0_187_4)">
<path d="M0 0h79v76H0z"/>
<path class="color-svg" d="M40.39 5.987c.645-1.918 1.278-4.159 3.167-4.975a3.71 3.71 0 0 1 2.89.018c.845.418 1.8 1.419 2.295 4.77.496 3.352.047 6.078-.36 8.676-1.678 10.564-1.119 12.164-.25 13.096.49.522 1.16 1.357 4.56 1.32 7.11-.078 14.25 1.14 21.322.391a3.696 3.696 0 0 1 2.35.424 4.248 4.248 0 0 1 1.443 1.713c.319.69.445 1.45.367 2.206-.305 2.303-3.064 3.59-6.266 5.045a38.866 38.866 0 0 1-8.528 2.64c-2.73.468-5.947.675-8.55 1.622-1.034.336-1.871 1.119-2.505 1.999-.364.541-.533 1.798-.557 3.575-.032 2.539.717 3.547 2.162 8.091.469 1.855.568 2.238.966 3.498.49 1.45 1.023 2.798 1.738 4.151a22.785 22.785 0 0 1 2.142 8.493 2.313 2.313 0 0 1-.51 1.756c-.823.8-2.435.328-2.987.169-4.2-1.22-8.15-9.012-14.983-16.397-1.464-1.58-3.44-3.547-6.181-3.707-1.431-.082-2.736.34-4.638 1.43-5.449 3.104-8.213 7.284-13.99 11.734-.727.556-2.34 1.76-4.334 1.582-.19.004-2.289-.228-2.925-1.597-.724-1.551.767-3.653 1.682-4.942 7.65-10.806 9.189-13.277 10.174-16.288.717-2.173 1.622-5.08.46-7.999-.609-1.515-1.664-2.76-5.742-5.41-8.222-5.343-12.67-5.967-13.247-9.28a3.786 3.786 0 0 1 .94-3.339c1.344-1.204 3.545-.333 9.09 1.46 4.312 1.394 8.59 2.675 13.465 3.017a8.332 8.332 0 0 0 4.749-.741c1.892-.982 2.774-2.6 3.803-4.527 3.985-7.494 5.98-11.25 6.788-13.674Z" fill="#F366CC" stroke="#fff" stroke-width="2" stroke-miterlimit="10"/>
</g>
<defs>
<clipPath id="clip0_187_4">
<path fill="#fff" d="M0 0h79v76H0z"/>
</clipPath>
</defs>
</svg></li>
<li><svg id="s-7" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 76">
<g clip-path="url(#clip0_187_4)">
<path d="M0 0h79v76H0z"/>
<path class="color-svg" d="M40.39 5.987c.645-1.918 1.278-4.159 3.167-4.975a3.71 3.71 0 0 1 2.89.018c.845.418 1.8 1.419 2.295 4.77.496 3.352.047 6.078-.36 8.676-1.678 10.564-1.119 12.164-.25 13.096.49.522 1.16 1.357 4.56 1.32 7.11-.078 14.25 1.14 21.322.391a3.696 3.696 0 0 1 2.35.424 4.248 4.248 0 0 1 1.443 1.713c.319.69.445 1.45.367 2.206-.305 2.303-3.064 3.59-6.266 5.045a38.866 38.866 0 0 1-8.528 2.64c-2.73.468-5.947.675-8.55 1.622-1.034.336-1.871 1.119-2.505 1.999-.364.541-.533 1.798-.557 3.575-.032 2.539.717 3.547 2.162 8.091.469 1.855.568 2.238.966 3.498.49 1.45 1.023 2.798 1.738 4.151a22.785 22.785 0 0 1 2.142 8.493 2.313 2.313 0 0 1-.51 1.756c-.823.8-2.435.328-2.987.169-4.2-1.22-8.15-9.012-14.983-16.397-1.464-1.58-3.44-3.547-6.181-3.707-1.431-.082-2.736.34-4.638 1.43-5.449 3.104-8.213 7.284-13.99 11.734-.727.556-2.34 1.76-4.334 1.582-.19.004-2.289-.228-2.925-1.597-.724-1.551.767-3.653 1.682-4.942 7.65-10.806 9.189-13.277 10.174-16.288.717-2.173 1.622-5.08.46-7.999-.609-1.515-1.664-2.76-5.742-5.41-8.222-5.343-12.67-5.967-13.247-9.28a3.786 3.786 0 0 1 .94-3.339c1.344-1.204 3.545-.333 9.09 1.46 4.312 1.394 8.59 2.675 13.465 3.017a8.332 8.332 0 0 0 4.749-.741c1.892-.982 2.774-2.6 3.803-4.527 3.985-7.494 5.98-11.25 6.788-13.674Z" fill="#000" stroke="#fff" stroke-width="2" stroke-miterlimit="10"/>
</g>
<defs>
<clipPath id="clip0_187_4">
<path fill="#fff" d="M0 0h79v76H0z"/>
</clipPath>
</defs>
</svg></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</div>
</div>
</section>
var colorArray = ["#8ecae6","#219ebc","#023047","#ffb703","#fb8500"];
var colorButtons = document.querySelectorAll(".color-svg"); // edited colors to color
var content = document.querySelector(".color-svg-main"); // same here
function buidPickerOptions(){
colorButtons.forEach((button,i) => {
// set the fill color of each button
button.style.fill = colorArray[i];
button.addEventListener("click", () =>{
// set the fill color from the button that is clicked
content.style.fill = colorArray[i];
})
});
}
buidPickerOptions() // you should call the function
首先，console.log()是你调试js最好的朋友。如果您登录 colorButtons，您将看到一个空数组。您可以使用 document.getElementsByClassName("colors-svg") 而不是 document.querySelectorAll。但是，您没有一个 class 名称为“colors-svg”的元素。
其次，您似乎将 class 名称与 ID 弄错了。每个id应该是唯一的，但是有多个元素具有相同的id。
您也不应嵌套 css 属性，如上所示。除非您使用的是某种允许此类行为的框架，否则您至少应按如下方式分隔内容：
#content {
background-color: #219ebc;
height: 100vh;
width: 100vw;
}
#s-7 {
max-height: 400px;
}
#color-change-element {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#select-container {
background-color: #fff;
left: 0;
overflow: hidden;
padding: 20px;
position: fixed;
top: 40%;
width: 200px;
}
#select-bottom {
height: 40px;
}
ul {
background-color: #fff;
display: flex;
height: 100%;
justify-content: space-between;
width: 100%;
}
li {
list-style: none;
cursor: pointer;
height: 30px;
margin-bottom: 10px;
width: 30px;
}
#colors {
height: 100%;
left: 0;
top: 0;
width: 100%;
最后，在添加事件侦听器时，您需要确保使用正确的 this 范围。否则所有按钮的行为都将像循环中的最后一个按钮一样。为了使用正确的 this 值，您需要用常规 function(event) {} 语法替换箭头函数。我也不认为您的 .forEach 循环格式正确，但我认为现在这已经足够了。
我正在尝试制作一个颜色选择器，其中按钮或颜色选项是 SVG 元素，单击时，它们会更改另一个 SVG 的填充颜色。我不太确定为什么代码不起作用。我确保以正确的 class 为目标，并确保 class 在包含填充样式的 SVG 部分中......我不知道为什么我的代码在Stack 但这里有一个 link 到我的 CodePen https://codepen.io/maddylobb/pen/oNormML 感谢任何和所有的帮助！
var colorArray = ["#8ecae6", "#219ebc", "#023047", "#ffb703", "#fb8500"];
var colorButtons = document.querySelectorAll(".colors-svg");
var content = document.querySelector(".colors-svg-main");
function buidPickerOptions() {
colorButtons.forEach((button, i) => {
// set the fill color of each button
button.style.fill = colorArray[i];
button.addEventListener("click", () => {
// set the fill color from the button that is clicked
content.style.fill = colorArray[i];
})
});
}
#content {
background-color: #219ebc;
height: 100vh;
//position: relative;
width: 100vw;
#color-change-element {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
#s-7 {
max-height: 400px;
}
}
#select-container {
background-color: #fff;
left: 0;
overflow: hidden;
padding: 20px;
position: fixed;
top: 40%;
width: 200px;
#select-bottom {
height: 40px;
ul {
background-color: #fff;
display: flex;
height: 100%;
justify-content: space-between;
width: 100%;
li {
list-style: none;
cursor: pointer;
height: 30px;
margin-bottom: 10px;
width: 30px;
}
}
#colors {
height: 100%;
left: 0;
top: 0;
width: 100%;
}
}
}
}
<section id="content">
<div id="color-change-element">
<svg id="s-7" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 76">
<g clip-path="url(#clip0_187_4)">
<path d="M0 0h79v76H0z"/>
<path class="color-svg-main" d="M40.39 5.987c.645-1.918 1.278-4.159 3.167-4.975a3.71 3.71 0 0 1 2.89.018c.845.418 1.8 1.419 2.295 4.77.496 3.352.047 6.078-.36 8.676-1.678 10.564-1.119 12.164-.25 13.096.49.522 1.16 1.357 4.56 1.32 7.11-.078 14.25 1.14 21.322.391a3.696 3.696 0 0 1 2.35.424 4.248 4.248 0 0 1 1.443 1.713c.319.69.445 1.45.367 2.206-.305 2.303-3.064 3.59-6.266 5.045a38.866 38.866 0 0 1-8.528 2.64c-2.73.468-5.947.675-8.55 1.622-1.034.336-1.871 1.119-2.505 1.999-.364.541-.533 1.798-.557 3.575-.032 2.539.717 3.547 2.162 8.091.469 1.855.568 2.238.966 3.498.49 1.45 1.023 2.798 1.738 4.151a22.785 22.785 0 0 1 2.142 8.493 2.313 2.313 0 0 1-.51 1.756c-.823.8-2.435.328-2.987.169-4.2-1.22-8.15-9.012-14.983-16.397-1.464-1.58-3.44-3.547-6.181-3.707-1.431-.082-2.736.34-4.638 1.43-5.449 3.104-8.213 7.284-13.99 11.734-.727.556-2.34 1.76-4.334 1.582-.19.004-2.289-.228-2.925-1.597-.724-1.551.767-3.653 1.682-4.942 7.65-10.806 9.189-13.277 10.174-16.288.717-2.173 1.622-5.08.46-7.999-.609-1.515-1.664-2.76-5.742-5.41-8.222-5.343-12.67-5.967-13.247-9.28a3.786 3.786 0 0 1 .94-3.339c1.344-1.204 3.545-.333 9.09 1.46 4.312 1.394 8.59 2.675 13.465 3.017a8.332 8.332 0 0 0 4.749-.741c1.892-.982 2.774-2.6 3.803-4.527 3.985-7.494 5.98-11.25 6.788-13.674Z" fill="#F366CC" stroke="#fff" stroke-width="2" stroke-miterlimit="10"/>
</g>
<defs>
<clipPath id="clip0_187_4">
<path fill="#fff" d="M0 0h79v76H0z"/>
</clipPath>
</defs>
</svg>
</div>
<div id="select-container">
<section id="select-top">
<h1>Select One:</h1>
<!-- <div>
<button class="selected">Colors</button>
</div> -->
</section>
<div id="select-bottom">
<section id="colors">
<ul>
<li><svg id="s-7" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 76">
<g clip-path="url(#clip0_187_4)">
<path d="M0 0h79v76H0z"/>
<path class="color-svg" d="M40.39 5.987c.645-1.918 1.278-4.159 3.167-4.975a3.71 3.71 0 0 1 2.89.018c.845.418 1.8 1.419 2.295 4.77.496 3.352.047 6.078-.36 8.676-1.678 10.564-1.119 12.164-.25 13.096.49.522 1.16 1.357 4.56 1.32 7.11-.078 14.25 1.14 21.322.391a3.696 3.696 0 0 1 2.35.424 4.248 4.248 0 0 1 1.443 1.713c.319.69.445 1.45.367 2.206-.305 2.303-3.064 3.59-6.266 5.045a38.866 38.866 0 0 1-8.528 2.64c-2.73.468-5.947.675-8.55 1.622-1.034.336-1.871 1.119-2.505 1.999-.364.541-.533 1.798-.557 3.575-.032 2.539.717 3.547 2.162 8.091.469 1.855.568 2.238.966 3.498.49 1.45 1.023 2.798 1.738 4.151a22.785 22.785 0 0 1 2.142 8.493 2.313 2.313 0 0 1-.51 1.756c-.823.8-2.435.328-2.987.169-4.2-1.22-8.15-9.012-14.983-16.397-1.464-1.58-3.44-3.547-6.181-3.707-1.431-.082-2.736.34-4.638 1.43-5.449 3.104-8.213 7.284-13.99 11.734-.727.556-2.34 1.76-4.334 1.582-.19.004-2.289-.228-2.925-1.597-.724-1.551.767-3.653 1.682-4.942 7.65-10.806 9.189-13.277 10.174-16.288.717-2.173 1.622-5.08.46-7.999-.609-1.515-1.664-2.76-5.742-5.41-8.222-5.343-12.67-5.967-13.247-9.28a3.786 3.786 0 0 1 .94-3.339c1.344-1.204 3.545-.333 9.09 1.46 4.312 1.394 8.59 2.675 13.465 3.017a8.332 8.332 0 0 0 4.749-.741c1.892-.982 2.774-2.6 3.803-4.527 3.985-7.494 5.98-11.25 6.788-13.674Z" fill="#F366CC" stroke="#fff" stroke-width="2" stroke-miterlimit="10"/>
</g>
<defs>
<clipPath id="clip0_187_4">
<path fill="#fff" d="M0 0h79v76H0z"/>
</clipPath>
</defs>
</svg></li>
<li><svg id="s-7" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79 76">
<g clip-path="url(#clip0_187_4)">
<path d="M0 0h79v76H0z"/>
<path class="color-svg" d="M40.39 5.987c.645-1.918 1.278-4.159 3.167-4.975a3.71 3.71 0 0 1 2.89.018c.845.418 1.8 1.419 2.295 4.77.496 3.352.047 6.078-.36 8.676-1.678 10.564-1.119 12.164-.25 13.096.49.522 1.16 1.357 4.56 1.32 7.11-.078 14.25 1.14 21.322.391a3.696 3.696 0 0 1 2.35.424 4.248 4.248 0 0 1 1.443 1.713c.319.69.445 1.45.367 2.206-.305 2.303-3.064 3.59-6.266 5.045a38.866 38.866 0 0 1-8.528 2.64c-2.73.468-5.947.675-8.55 1.622-1.034.336-1.871 1.119-2.505 1.999-.364.541-.533 1.798-.557 3.575-.032 2.539.717 3.547 2.162 8.091.469 1.855.568 2.238.966 3.498.49 1.45 1.023 2.798 1.738 4.151a22.785 22.785 0 0 1 2.142 8.493 2.313 2.313 0 0 1-.51 1.756c-.823.8-2.435.328-2.987.169-4.2-1.22-8.15-9.012-14.983-16.397-1.464-1.58-3.44-3.547-6.181-3.707-1.431-.082-2.736.34-4.638 1.43-5.449 3.104-8.213 7.284-13.99 11.734-.727.556-2.34 1.76-4.334 1.582-.19.004-2.289-.228-2.925-1.597-.724-1.551.767-3.653 1.682-4.942 7.65-10.806 9.189-13.277 10.174-16.288.717-2.173 1.622-5.08.46-7.999-.609-1.515-1.664-2.76-5.742-5.41-8.222-5.343-12.67-5.967-13.247-9.28a3.786 3.786 0 0 1 .94-3.339c1.344-1.204 3.545-.333 9.09 1.46 4.312 1.394 8.59 2.675 13.465 3.017a8.332 8.332 0 0 0 4.749-.741c1.892-.982 2.774-2.6 3.803-4.527 3.985-7.494 5.98-11.25 6.788-13.674Z" fill="#000" stroke="#fff" stroke-width="2" stroke-miterlimit="10"/>
</g>
<defs>
<clipPath id="clip0_187_4">
<path fill="#fff" d="M0 0h79v76H0z"/>
</clipPath>
</defs>
</svg></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
</div>
</div>
</section>
var colorArray = ["#8ecae6","#219ebc","#023047","#ffb703","#fb8500"];
var colorButtons = document.querySelectorAll(".color-svg"); // edited colors to color
var content = document.querySelector(".color-svg-main"); // same here
function buidPickerOptions(){
colorButtons.forEach((button,i) => {
// set the fill color of each button
button.style.fill = colorArray[i];
button.addEventListener("click", () =>{
// set the fill color from the button that is clicked
content.style.fill = colorArray[i];
})
});
}
buidPickerOptions() // you should call the function
首先，console.log()是你调试js最好的朋友。如果您登录 colorButtons，您将看到一个空数组。您可以使用 document.getElementsByClassName("colors-svg") 而不是 document.querySelectorAll。但是，您没有一个 class 名称为“colors-svg”的元素。
其次，您似乎将 class 名称与 ID 弄错了。每个id应该是唯一的，但是有多个元素具有相同的id。
您也不应嵌套 css 属性，如上所示。除非您使用的是某种允许此类行为的框架，否则您至少应按如下方式分隔内容：
#content {
background-color: #219ebc;
height: 100vh;
width: 100vw;
}
#s-7 {
max-height: 400px;
}
#color-change-element {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#select-container {
background-color: #fff;
left: 0;
overflow: hidden;
padding: 20px;
position: fixed;
top: 40%;
width: 200px;
}
#select-bottom {
height: 40px;
}
ul {
background-color: #fff;
display: flex;
height: 100%;
justify-content: space-between;
width: 100%;
}
li {
list-style: none;
cursor: pointer;
height: 30px;
margin-bottom: 10px;
width: 30px;
}
#colors {
height: 100%;
left: 0;
top: 0;
width: 100%;
最后，在添加事件侦听器时，您需要确保使用正确的 this 范围。否则所有按钮的行为都将像循环中的最后一个按钮一样。为了使用正确的 this 值，您需要用常规 function(event) {} 语法替换箭头函数。我也不认为您的 .forEach 循环格式正确，但我认为现在这已经足够了。