首頁猿問 JavaScript Toggle...

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

JavaScript

喵喵時光機 2023-07-06 15:00:17

我正在嘗試切換“活動”CSS 類的“禁用”，以使某些 SVG 的填充屬性在單擊時發生變化。我能夠正確更改第一個元素，但是當嘗試對第二個和第三個 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> <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貢獻1804條經驗獲得超3個贊

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

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

但是，由于您嘗試定位事件調用元素，我認為您可以通過引用該元素來簡化它。

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

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

這是一個快速片段：

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>

?</div>

反對回復 2023-07-06

蝴蝶刀刀

TA貢獻1801條經驗獲得超8個贊

為什么會發生這種情況？

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

我們該如何解決這個問題？

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

嘗試一下！運行下面的例子！

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;

}

Click Me!

</div>

Click Me!

</div>

Click Me!

</div>

Click Me!

</div>

反對回復 2023-07-06

2 回答
0 關注
181 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

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

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

2 回答

為什么會發生這種情況？

我們該如何解決這個問題？

添加回答

我們該如何解決這個問題？