Question

我想在播放音频文件时更改div的背景颜色，然后在播放音频时将其更改回原来的颜色。

$('.uprow2').on('click', function() {
  $('#karma')[0].play();
});

.uprow2 {
  width: 680px;
  height: 60px;
  background: #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="uprow2">
  <p class="song">LISTEN - KARMA POLICE</p>
</div>

任何帮助都将不胜感激。

谢谢！

Answer 1

要实现这一点，最好直接使用audio元素上的事件。这样，状态将不会挂钩到按钮，并且如果用户通过播放器控件改变音频文件的播放状态，则状态仍然有效。试试这个：

$('#karma').on('playing', function() {
  $('.uprow2').addClass('playing');      
}).on('ended pause suspend error', function() {
  $('.uprow2').removeClass('playing');
});

Working example

Answer 2

试试这个

$('.uprow2').on('click', function(){
  if ($(this).hasClass('play')) {
    $(this).removeClass('play');
  } else {
    $(this).addClass('play');
  }
});

.uprow2 {
width: 680px;
height: 60px;
background-color: #000000;
}

.play {
background-color: #FF0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<html>    
<div class="uprow2"><p class="song">LISTEN - KARMA POLICE</p></div>
</html>

Answer 3

只需添加jQuery代码即可更改此div

的背景颜色

$(this).css('background-color', 'your-color');

参考以下解决方案：

＆＃13;

$('.uprow2').on('click', function(){
  $('#karma')[0].play();
  $(this).css('background-color', 'yellow');
});

＆＃13;

.uprow2 {
width: 680px;
height: 60px;
background: #000000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>    
<div class="uprow2"><p class="song">LISTEN - KARMA POLICE</p></div>
</html>

＆＃13;

Answer 4

您可以使用https://www.iis.net/learn/get-started/planning-your-iis-architecture/deep-dive-into-iis-configuration-with-iis-7-and-iis-8来处理按钮背景。

＆＃13;

var $audioElement = $('#karma');
$audioElement.on('playing abort stalled ended pause suspend error', function(ev) {
    $('.uprow2').toggleClass('myPlayingClass',ev.type == "playing");
});

＆＃13;

.uprow2 {
  width: 680px;
  height: 80px;
  background: #000000;
  color:white;
  }
.myPlayingClass{
background-color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="uprow2">
  <audio id="karma" controls  src="https://www.w3schools.com/tags/horse.ogg">
  Your browser does not support the audio element.
</audio>
  <p class="song">LISTEN - KARMA POLICE</p>
</div>

＆＃13;

当.play（）为真时如何更改div背景颜色

4 个答案: