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

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

JavaScript Toggle 不適用于具有相同類屬性的許多元素

JavaScript Toggle 不適用于具有相同類屬性的許多元素

我正在嘗試切換“活動(dòng)”CSS 類的“禁用”，以使某些 SVG 的填充屬性在單擊時(shí)發(fā)生變化。我能夠正確更改第一個(gè)元素，但是當(dāng)嘗試對(duì)第二個(gè)和第三個(gè) SVG 進(jìn)行相同操作時(shí)，它會(huì)更改第一個(gè) div 內(nèi)第一個(gè)元素的顏色。超文本標(biāo)記語言   <div>       <svg onclick="toggleColor()" class="home__like disable heart">           <use xlink:href="img/sprite.svg#icon-heart-full"></use>       </svg>   </div>   <div>       <svg onclick="toggleColor()" class="home__like disable heart">           <use xlink:href="img/sprite.svg#icon-heart-full"></use>       </svg>   </div>   <div>       <svg onclick="toggleColor()" class="home__like disable heart">           <use xlink:href="img/sprite.svg#icon-heart-full"></use>       </svg>   </div>CSS.disable {    fill: #fff;}.active {    fill: $color-primary;}JavaScriptfunction toggleColor() {    const toggleHeart = document.querySelector('.heart');    if(toggleHeart.classList.contains('disable')) {        toggleHeart.classList.remove('disable');        toggleHeart.classList.add('active');    } else {        toggleHeart.classList.remove('active');        toggleHeart.classList.add('disable');    }}
查看完整描述

2 回答

?
狐的傳說

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超3個(gè)贊

您正在使用.querySelector()它返回文檔中與提供的選擇器匹配的第一個(gè)元素。

要獲取多個(gè)元素，您需要使用.querySelectorAll()它將返回與選擇器匹配的元素的靜態(tài)NodeList。此時(shí)，您需要循環(huán)遍歷 NodeList 并操作類。

但是，由于您嘗試定位事件調(diào)用元素，我認(rèn)為您可以通過引用該元素來簡化它。

function?toggleColor(el,?e)?{
????el.classList.toggle('disable');
????el.classList.toggle('active');
}

并將您的onclick處理程序更改為onclick="toggleColor(this,event);"

這是一個(gè)快速片段：

function toggleColor(el, e) {

? ? el.classList.toggle('disable');

? ? el.classList.toggle('active');

}

.disable { color: #ccc }

.active? { color: #0095ee; }

<div>

? ? <svg class="disable" onclick="toggleColor(this,event);" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="currentColor" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>

?</div>

?<div>

? ? ?<svg class="disable" onclick="toggleColor(this,event);" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="currentColor" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>

?</div>

?<div>

? ? ?<svg class="disable" onclick="toggleColor(this,event);" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="currentColor" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>

?</div>


查看完整回答
反對(duì) 回復(fù) 2023-07-06
?
蝴蝶刀刀

TA貢獻(xiàn)1801條經(jīng)驗(yàn) 獲得超8個(gè)贊

為什么會(huì)發(fā)生這種情況？

由于有多個(gè)具有 類的元素heart，因此它不知道要在哪個(gè)元素上執(zhí)行腳本！這就像一個(gè)老師試圖給鮑勃打電話，而班級(jí)里有 5 個(gè)叫鮑勃的人。

我們?cè)撊绾谓鉀Q這個(gè)問題？

onclick您可以通過在腳本中提供元素的引用來更改 中的函數(shù)，如下所示： onclick="myFunction(this)"?，F(xiàn)在，在 javascript 中，您可以對(duì)元素執(zhí)行任何您需要的操作。

嘗試一下！運(yùn)行下面的例子！

function toggleColor(element) {


    toggleHeart = element;


    if(toggleHeart.classList.contains('disable')) {

        toggleHeart.classList.remove('disable');

        toggleHeart.classList.add('active');

    } else {

        toggleHeart.classList.remove('active');

        toggleHeart.classList.add('disable');

    }

}

.disable {

    color: blue;

}


.active {

    color: red;

}

<!--                      vvv  below we used the "this" keyword which references to the svg element -->

<div onclick="toggleColor(this)" class="disable">

    Click Me!

</div>

<div onclick="toggleColor(this)" class="disable">

    Click Me!

</div>

<div onclick="toggleColor(this)" class="disable">

    Click Me!

</div>

<div onclick="toggleColor(this)" class="disable">

    Click Me!

</div>


查看完整回答
反對(duì) 回復(fù) 2023-07-06
  • 2 回答
  • 0 關(guān)注
  • 177 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號(hào)

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