我正在嘗試制作一個顏色選擇器，其中按鈕或顏色選項是 SVG 元素，單擊時，它們會更改另一個 SVG 的填充顏色。我不太確定為什么代碼不起作用。我確保以正確的類為目標，并確保該類位于包含填充樣式的 SVG 部分中……我不知道為什么我的代碼在 Stack 中很不穩定，但這里是我的鏈接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 >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>uj5u.com熱心網友回復：
首先，console.log()是你除錯js時最好的朋友。如果您登錄colorButtons，您將看到一個空陣列。而不是document.querySelectorAll你可以使用document.getElementsByClassName("colors-svg"). 但是，您沒有一個類名為“colors-svg”的元素。
其次，您似乎將類名與 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 回圈格式正確，但我認為這足以現在使用。
uj5u.com熱心網友回復：
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
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/441113.html
標籤：javascript css svg 充满 选色器