使用Jquery切换静音Javascript功能

Question

大家好我正在尝试同时编写if / else语句和切换图像。 基本上，我的目标是切换图像（在这种情况下，其ID为soundonoff）。 但是我似乎无法弄清楚我要去哪里。 问题是切换有效，但是检测是否静音是无效的。 （例如，在我的完整代码中，我可以切换各种音频/视频文件的innerHTML ，这是document.getElementsByName('mymedia')[0]出现的地方。我们花费了大约4个小时的时间对所有帮助表示感谢，这似乎无法弄清楚。

我应该补充一点，我不知道在哪里为detectmute()添加一个detectmute() ，我试图将其添加到我的视频和按钮soundonoff中，但是都没有起作用。

这是我的代码：

function detectmute(){
if(document.getElementById('soundonoff').src == 'images/icons/soundoff.png'){
document.getElementsByName('mymedia')[0].muted = true;
}
else if(document.getElementById('soundonoff').src == 'images/icons/soundon.png'){
document.getElementsByName('mymedia')[0].muted = false;
}
$("#soundonoff").toggle(function(){
this.src = "images/icons/soundoff.png";
document.getElementsByName('mymedia')[0].muted = true;
}, function() { 
this.src = "images/icons/soundon.png";
document.getElementsByName('mymedia')[0].muted = false;
});
}

Answer 1

好吧，我解决了自己的问题，解决方案如下：

$("#soundonoff").toggle(function(){
 this.src = "images/icons/soundoff.png";
document.getElementsByName('mymedia')[0].muted = true;
$("#soundonoff").attr('name', 'soundoff'); 
 }, function() { 
  this.src = "images/icons/soundon.png";
 document.getElementsByName('mymedia')[0].muted = false;
 $("#soundonoff").attr('name', 'soundon'); 
   });

  function detectmute(){
      var soundstate = document.getElementById('soundonoff');
      if (soundstate.name == "soundon")
        {
      document.getElementsByName('mymedia')[0].muted = false;
      }
  else if (soundstate.name == "soundoff")
      {
      document.getElementsByName('mymedia')[0].muted = true;
      }
  }

Answer 2

$('#soundonoff').on('click', function () {
    var $this = $(this);
    if ($this.attr('src') == 'images/icons/soundon.png') {
        $this.attr('src', 'images/icons/soundoff.png').attr('data-muted', true);
    } else {
        $this.attr('src', 'images/icons/soundon.png').attr('data-muted', false);
    }
});

这是一个演示： http : //jsfiddle.net/jLvZW/3/ 已更新

您还可以设置一个将一个源转换为另一个源的对象：

var convert = {
        'images/icons/soundon.png' : ['images/icons/soundoff.png', true],
        'images/icons/soundoff.png' : ['images/icons/soundon.png', false]
    };
$('#soundonoff').on('click', function () {
    var $this = $(this);
    $this.attr('src', convert[$this.attr('src')][0]).attr('data-muted', convert[$this.attr('src')][1]);
});

这是一个演示： http : //jsfiddle.net/jLvZW/2/ 更新