查询选择器工作，但查询选择器全部不工作

Question

我对JS很陌生。有3个svgs，我试图在鼠标结束时更改填充颜色。当我使用查询选择器（“.svg”）时，第一个可以完美地工作。我想更改所有三个，不仅是第一个，而且没有查询选择全部（“.svg”），或获取元素按类名称，获取元素按标记名称似乎工作。问题出在哪里？任何帮助将不胜感激。谢谢。const icon = document.querySelectorAll(".svg");icon.addEventListener("mouseover", function () {  icon.style.color = "#ED4264";});icon.addEventListener("mouseout", function () {  icon.style.color = "black";});<footer>      <div class="prev">        <svg          class="svg"          width="22"          height="21"          viewBox="0 0 22 21"          xmlns="http://www.w3.org/2000/svg"        >          <path            fill-rule="evenodd"            clip-rule="evenodd"            d="M10.3376 20.7849L0.183247 10.5454L10.3376 0.305979L13.1778 3.12258L7.80002 8.54544L21.9751 8.54544V12.5454L7.80002 12.5454L13.1778 17.9683L10.3376 20.7849Z"            fill="currentcolor"          />        </svg>      </div>      <div class="random">        <svg          class="svg"          width="27"          height="24"          viewBox="0 0 27 24"          xmlns="http://www.w3.org/2000/svg"        >          <path            d="M0 0L3.57143 3.57143L7.7486e-05 7.14286"            transform="translate(20.5713 2)"            stroke="currentcolor"            stroke-width="3"          />          <path            d="M0 0L3.57143 3.57143L7.7486e-05 7.14286"            transform="translate(20.5713 14.8572)"            stroke="currentcolor"            stroke-width="3"          />          <path            d="M0 12.3214C5.03247 12.3214 10.0649 9.91071 11.5747 6.16059C13.0844 2.41047 17.1104 7.37802e-05 22.1429 0"            transform="translate(0.571289 18.4285) scale(1 -1)"            stroke="currentcolor"            stroke-width="4"          />        

Answer 1

不同之处在于，只选择1个元素，而选择多个元素，这意味着你会得到一个列表，所以你需要循环并为每个SVG添加一个事件侦听器。.querySelector().querySelectorAll().querySelectorAll()

const icons = document.querySelectorAll(".svg"); //use "icons", its plural

icons.forEach(icon => {   

   icon.addEventListener("mouseover", function () {

     icon.style.color = "#ED4264";

   });

   icon.addEventListener("mouseout", function () {

     icon.style.color = "black";

   });

})

<footer>

      <div class="prev">

        <svg

          class="svg"

          width="22"

          height="21"

          viewBox="0 0 22 21"

          xmlns="http://www.w3.org/2000/svg"

        >

          <path

            fill-rule="evenodd"

            clip-rule="evenodd"

            d="M10.3376 20.7849L0.183247 10.5454L10.3376 0.305979L13.1778 3.12258L7.80002 8.54544L21.9751 8.54544V12.5454L7.80002 12.5454L13.1778 17.9683L10.3376 20.7849Z"

            fill="currentcolor"

          />

        </svg>

      </div>

      <div class="random">

        <svg

          class="svg"

          width="27"

          height="24"

          viewBox="0 0 27 24"

          xmlns="http://www.w3.org/2000/svg"

        >

          <path

            d="M0 0L3.57143 3.57143L7.7486e-05 7.14286"

            transform="translate(20.5713 2)"

            stroke="currentcolor"

            stroke-width="3"

          />

          <path

            d="M0 0L3.57143 3.57143L7.7486e-05 7.14286"

            transform="translate(20.5713 14.8572)"

            stroke="currentcolor"

            stroke-width="3"

          />

          <path

            d="M0 12.3214C5.03247 12.3214 10.0649 9.91071 11.5747 6.16059C13.0844 2.41047 17.1104 7.37802e-05 22.1429 0"

            transform="translate(0.571289 18.4285) scale(1 -1)"

            stroke="currentcolor"

            stroke-width="4"

          />

          <path

            fill-rule="evenodd"

            clip-rule="evenodd"

            d="M22.1431 4C19.2583 4 16.9155 4.88867 15.3193 6.28589C14.4653 5.53833 13.8252 4.64478 13.4302 3.66406C13.3286 3.41235 13.2163 3.16724 13.0933 2.92822C15.4746 1.03613 18.6689 0 22.1431 0V4ZM13.0933 9.64331C11.9321 8.7207 10.9639 7.59473 10.251 6.28589C10.0537 6.64795 9.87598 7.02393 9.71924 7.41357C9.68506 7.49829 9.64844 7.58276 9.6084 7.66675C10.7573 8.46265 11.7734 9.43262 12.5425 10.5715C12.7437 10.2737 12.9277 9.96436 13.0933 9.64331ZM9.6084 13.4763C9.09961 12.4043 8.12012 11.3911 6.73145 10.5715C6.55762 10.6741 6.37744 10.7737 6.19092 10.8701C4.41309 11.7878 2.21338 12.3215 0 12.3215V16.3215C2.81885 16.3215 5.65186 15.6497 8.02588 14.4246C8.57275 14.1423 9.10352 13.8262 9.6084 13.4763Z"

            transform="translate(0.571289 3.57129)"

            fill="currentcolor"

          />

        </svg>

      </div>

      <div class="next">

        <svg

          class="svg"

          width="23"

          height="21"

          viewBox="0 0 23 21"

          xmlns="http://www.w3.org/2000/svg"

        >

          <path

            fill-rule="evenodd"

            clip-rule="evenodd"

            d="M12.2088 0.0202637L22.3631 10.2597L12.2088 20.4992L9.36858 17.6826L14.7464 12.2597H0.571289V8.25973H14.7464L9.36858 2.83686L12.2088 0.0202637Z"

            fill="currentcolor"

          />

        </svg>

      </div>

    </footer>

Answer 2

下面返回元素的节点列表。

const icon = document.querySelectorAll(".svg");

您不能在节点列表上使用，但可以执行以下操作：addEventListener

icon.forEach(function(elem) {

  elem.addEventListener(...);

});

这应该将事件侦听器附加到原始查询的每个元素。