html5 有四个文字 点击不同文字播放不同音乐 播放当前某一个音乐关闭其他的音乐 如何用jq来实现
时间: 2023-08-04 07:09:33 浏览: 58
可以通过以下步骤来实现:
1. 给每个文字添加一个唯一的 class,用于区分不同的文字。
2. 给每个文字添加一个点击事件,当点击时触发播放音乐的函数。
3. 在播放音乐函数中,先关闭其他的音乐,再根据点击的文字来播放对应的音乐。
以下是使用 jQuery 实现上述功能的示例代码:
```html
<!-- HTML 代码 -->
<p class="text1">文字1</p>
<p class="text2">文字2</p>
<p class="text3">文字3</p>
<audio id="audio1" src="music1.mp3"></audio>
<audio id="audio2" src="music2.mp3"></audio>
<audio id="audio3" src="music3.mp3"></audio>
```
```javascript
// JS 代码
$(function() {
$('p').click(function() {
var className = $(this).attr('class');
playMusic(className);
});
});
function playMusic(className) {
$('audio').each(function() {
this.pause(); // 先暂停所有音乐
});
$('#audio' + className.substr(4)).get(0).play(); // 播放对应的音乐
}
```
在上述代码中,我们使用 `$('p').click()` 来监听每个文字的点击事件。当点击时,获取该文字的 class 名称,然后调用 `playMusic()` 函数来播放对应的音乐。
在 `playMusic()` 函数中,我们使用 `$('audio').each()` 来遍历所有的音乐,然后调用 `pause()` 方法来暂停它们。接着,使用 `$('#audio' + className.substr(4)).get(0).play()` 来播放指定的音乐。其中,`className.substr(4)` 是为了获取去掉前缀的数字部分,用于拼接对应的音乐 ID。