所以我在玩 Font Awesome 和 BootStrap，我正在尋找一種方法來切換按鈕上的星形圖示。問題是，它在一個回圈內。
{% for i in X %}
<button id="{{i.id}}"><span class="class1" id="StarIcon"></span></button>
{% endfor %}
我想在單擊時將相應的跨度從“class1”更改為“class2”，但是只知道如何更改所有跨度或什至僅更改最后一個就已經有幫助了。
uj5u.com熱心網友回復：
您可以使用classList.add()和classList.remove()：
const el = document.getElementById('someButton');
document.getElementById('{{i.id}}').onclick = () => {
el.classList.add('class2');
el.classList.remove('class1')
}<button id="{{i.id}}"><i id="someButton" class="class1" id="StarIcon">Button!</i></button>uj5u.com熱心網友回復：
不確定我是否正確理解你，但可能你正在尋找這樣的東西：
{% for i in X %}
<button id="{{i.id}}"><span class="class1" id="StarIcon" onclick="btnClick(this)"></span></button>
{% endfor %}
...
function btnClick(el) {
const spanEl = el.querySelector('#StarIcon');
if (spanEl.classList.contains('class1')) {
setClass2(spanEl);
} else if (spanEl.classList.contains('class2')) {
setClass1(spanEl);
}
}
function setClass1(el) {
el.classList.add('class1');
el.classList.remove('class2');
}
function setClass2(el) {
el.classList.add('class2');
el.classList.remove('class1');
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/343470.html
標籤：javascript 查询 切换