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>
