15 点击变换图片再点击变回,点击其他自身变回

问题:1.点击mediabox,暂停播放,再点击开始播放。(点击一个其他暂停播放)

2.点击mediabox,imgbox的背景图片变成另一张背景图片,再点击变回原来的背景图片,点击其他mediabox,这个mediabox的背景图片和背景颜色/文字颜色变回原来的。

——现在点击mediabox,背景图片变不回去

<!DOCTYPE html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<script src="jquery-1.10.2.min.js"></script>
<style type="text/css">
body {
margin: 0;
}

audio {
display: none;
}

td {
border-bottom: 1px #dfdfdf solid;
}

.mediabox {
width: calc((100% - 54px)/4);
height: 60px !important;
overflow: hidden;
text-align: center;
background: #f8f8f8;
border: 0;
cursor: pointer;
border-top: 5px #fff solid;
border-left: 5px #fff solid;
color: #666;
font-size: 14px;
padding: 0 5px;
}

.mediabox:last-child {
border-right: 5px #fff solid;
}

.imgbox {
width: 18px;
height: 17px;
position: relative;
left: calc(50% - 9px);
top: 10px;
background: url(img/media.png) no-repeat;
background-size: 100%;
}

.mediabox .active {
background: url("img/media1.png") no-repeat;
background-size: 100%;
}
</style>

</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td colspan="4" style="font-size: 1.5em; height: 55px; text-align: center;">管理员钥匙</td>
</tr>
<tr>
<td colspan="4" style="font-size: 1em; height: 60px; padding: 15px 0 0 15px;">测试酒店</td>
</tr>
<tr id="container">
<td class="mediabox">
<div class="imgbox"></div>
<p>LRC1-1134</p>
<audio src="http://fjdx.sc.chinaz.com/files/download/sound/huang/cd9/wav/183.wav" loop controls>
</audio>
</td>
<td class="mediabox">
<div class="imgbox"></div>
<p>LRC1-1135</p>
<audio src="http://fjdx.sc.chinaz.com/files/download/sound/huang/cd9/wav/183.wav" loop controls>
</audio>
</td>
<td class="mediabox">
<div class="imgbox"></div>
<p>LRC1-1136</p>
<audio src="http://fjdx.sc.chinaz.com/files/download/sound/huang/cd9/wav/183.wav" loop controls>
</audio>
</td>
<td class="mediabox">
<div class="imgbox"></div>
<p>LRC1-1137</p>
<audio src="http://fjdx.sc.chinaz.com/files/download/sound/huang/cd9/wav/183.wav" loop controls>
</audio>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
var mediabox = document.getElementsByClassName("mediabox");
var imgbox = document.getElementsByClassName("imgbox");
console.log(mediabox);
for (var i = 0; i < mediabox.length; i++) {
console.log(mediabox[i])
mediabox[i].onclick = function () {
console.log(1)
console.log(this)
}
}

for (var m = 0; m < mediabox.length; m++) {
mediabox[m].onclick = function () {

//播放,暂停
var audios = document.getElementsByTagName('audio')
for (var k = 0; k < audios.length; k++) {
audios[k].pause()
}
var childNodes = this.childNodes
var audio
for (j = 0; j < childNodes.length; j++) {
console.log(childNodes[j].nodeName)
if (childNodes[j].nodeName === 'AUDIO') {
audio = childNodes[j]
break
}
}
audio.play()

//图标,清除class
var imgbox = this.firstElementChild;
if(imgbox.classList.contains('active')){
imgbox.classList.remove('active');
return;
}
imgbox.classList.add('active');

// 自身样式
console.log(this)
for(var n=0;n<mediabox.length;n++){
mediabox[n].style.background = '#f8f8f8'
mediabox[n].style.color = '#666'
}
this.style.background = '#ff900d';
this.style.color = '#fff'
}
}


function startSoundsByJs(event) {
console.log(event)
console.log(this)
};
</script>

</html>
请先 登录 后评论

最佳答案 2019-06-28 10:00

http://www.svipnet.com/index.php?c=category&id=6

请先 登录 后评论

其它 0 个回答

  • 2 关注
  • 0 收藏,3473 浏览
  • 提出于 2019-05-28 09:06

相似问题