第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

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

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

慕桂英3389331 2022-09-16 21:40:43
我對JS很陌生。有3個svgs，我試圖在鼠標(biāo)結(jié)束時更改填充顏色。當(dāng)我使用查詢選擇器（“.svg”）時，第一個可以完美地工作。我想更改所有三個，不僅是第一個，而且沒有查詢選擇全部（“.svg”），或獲取元素按類名稱，獲取元素按標(biāo)記名稱似乎工作。問題出在哪里？任何幫助將不勝感激。謝謝。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 回答

?
喵喵時光機(jī)

TA貢獻(xiàn)1846條經(jīng)驗(yàn) 獲得超7個贊

不同之處在于，只選擇1個元素，而選擇多個元素，這意味著你會得到一個列表，所以你需要循環(huán)并為每個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>


查看完整回答
反對 回復(fù) 2022-09-16
?
揚(yáng)帆大魚

TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超9個贊

下面返回元素的節(jié)點(diǎn)列表。


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

您不能在節(jié)點(diǎn)列表上使用，但可以執(zhí)行以下操作：addEventListener


icon.forEach(function(elem) {

  elem.addEventListener(...);

});

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


查看完整回答
反對 回復(fù) 2022-09-16
  • 2 回答
  • 0 關(guān)注
  • 148 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號