英文:
How To add another class to an element
问题
以下是翻译好的内容，不包括代码部分：
我有以下带有类名“kiwi”的图像标签，尽管我还有另一个类使图像旋转。当我单击音乐播放器的播放按钮时，我想切换这个类（称为'elem'）。
这是带有类的图像标签：
<img src="./images/kiwi.png" class="kiwi" aria-hidden="true" />
我想要这样：
<img src="./images/kiwi.png" class="kiwi **elem**" aria-hidden="true" />
这是应该在点击播放按钮时将'class'类添加到图像标签的播放按钮：
<button onclick="justplay()" id="play"><i class="fa fa-play" aria-hidden="true"></i></button>
以下是播放按钮的脚本：
let play = document.querySelector("#play");
function playsong() {
track.play();
Playing_song = true;
play.innerHTML = '<i class="fa fa-pause" aria-hidden="true"></i>';
}
我尝试过在使用classList时找不到解决方法。
英文:
i have the following image tag with a class name "kiwi" though i have another class which makes the image spin . i want to toggle this class (called 'elem') when i click on the play button of my music player
this is the image tage with the class
<img src="./images/kiwi.png" class="kiwi" aria-hidden="true" />
i want to do
<img src="./images/kiwi.png" class="kiwi **elem**" aria-hidden="true" />
and this is the play button which should add 'elem' class to the image tag onced clicked
<button onclick="justplay()" id="play"><i class="fa fa-play" aria-hidden="true"></i></button>
here is the script for play button
let play = document.querySelector("#play");
function playsong() {
track.play();
Playing_song = true;
play.innerHTML = '<i class="fa fa-pause" aria-hidden="true"></i>';
}
I want the round image to spin when play button is pressed
I tried googling this but i could not figure it out with classList
答案1
得分: 0
要向元素添加一个类，请执行以下操作：
element.classList.add('elem')
更多关于classList 属性的信息。
英文:
To add a class to an element, do this:
element.classList.add('elem')
Further reading about the classList property.
答案2
得分: 0
这是第一个元素的代码：
let el = document.querySelector('.kiwi')
el.addEventListener('click', (e) => {
e.target.classList.toggle('elem')
})
这是多个元素的代码：
let el = document.querySelectorAll('.kiwi')
el.forEach((item, index) => {
item.addEventListener('click', (e) => {
el.forEach((toRemove) => {
toRemove.classList.remove('elem')
})
e.target.classList.toggle('elem')
})
})
英文:
its for one element:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let el = document.querySelector('.kiwi')
el.addEventListener('click', (e) => {
e.target.classList.toggle('elem')
})
<!-- language: lang-css -->
.elem{
border:1px solid red;
}
<!-- language: lang-html -->
<ul>
<li class="kiwi">1</li>
</ul>
<!-- end snippet -->
if you have more .kiwi you need to querySelectorAll and use forEach to add eventListener like THIS:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let el = document.querySelectorAll('.kiwi')
el.forEach((item, index) => {item.addEventListener('click', (e) => {
el.forEach((toRemove) => {
toRemove.classList.remove('elem')
})
e.target.classList.toggle('elem')
})
})
<!-- language: lang-css -->
.elem{
border:1px solid red;
}
<!-- language: lang-html -->
<ul>
<li class="kiwi">1</li>
<li class="kiwi">2</li>
<li class="kiwi">3</li>
</ul>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论