如果颜色选择器按钮是svg，则元素也会更改。

Question

我试图制作一个颜色选择器，其中按钮或颜色选项是SVG元素，当单击时，它们会更改另一个SVG的填充颜色。我不太清楚为什么代码不起作用。我确保目标是正确的类，还确保类位于包含fill样式的SVG部分.我不知道为什么我的代码在堆栈中不可靠，但是这里有一个指向我的CodePen https://codepen.io/maddylobb/pen/oNormML Any的链接，所有的帮助都很感谢！

​

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>

​

Answer 1

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

Answer 2

首先，在调试js时，console.log()是您最好的朋友。如果您记录colorButtons，您将看到一个空数组。而不是document.querySelectorAll，您可以使用document.getElementsByClassName("colors-svg")。但是，您没有一个类名为"colors-svg“的元素。

其次，你似乎把类名和ids搞错了。每个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循环的格式是正确的，但我认为现在已经足够了。