亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

查詢選擇器工作，但查詢選擇器全部不工作

查詢選擇器工作，但查詢選擇器全部不工作

慕桂英3389331 2022-09-16 21:40:43
我對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"          />        
查看完整描述

2 回答

?
喵喵時光機

TA貢獻1846條經驗 獲得超7個贊

不同之處在于，只選擇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>


查看完整回答
反對 回復 2022-09-16
?
揚帆大魚

TA貢獻1799條經驗 獲得超9個贊

下面返回元素的節點列表。


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

您不能在節點列表上使用，但可以執行以下操作：addEventListener


icon.forEach(function(elem) {

  elem.addEventListener(...);

});

這應該將事件偵聽器附加到原始查詢的每個元素。


查看完整回答
反對 回復 2022-09-16
  • 2 回答
  • 0 關注
  • 139 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號