Question

大家好我试图写一个if / else语句以及切换图像。基本上我的目标是切换图像（在这种情况下，使用声音的idonoff）。但是，我似乎无法弄清楚我哪里出错了。问题是切换工作，但检测其是否静音不起作用。（在我的完整代码中，例如我让它切换innerHTML各种音频/视频文件，这就是document.getElementsByName('mymedia')[0]的用武之地。任何帮助都会非常感激我花了大约4个小时来处理这个问题。似乎无法弄明白。

我应该补充一点，我不知道在哪里为detectmute()添加一个eventlistener，我试图将它添加到我的视频中，然后添加到按钮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/ 已更新

使用Jquery Toggle切换静音Javascript函数

2 个答案: