切换静音Javascript功能与Jquery切换

嗨所有我想写一个if/else语句以及切换图像。基本上我的目标是切换图像（在这种情况下，声音的ID）。不过，我似乎无法弄清楚我出错的地方。问题在于切换作品，但检测其是否静音不起作用。（在我完整的代码中，例如，我将它切换为innerHTML各种音频/视频文件，这是document.getElementsByName('mymedia')[0]进来。任何帮助将非常感激，我花了大约4个小时的工作，似乎无法弄清楚。切换静音Javascript功能与Jquery切换

我要补充一点，我不知道在哪里添加事件侦听为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; 
}); 
}

来源

2011-12-11 IamaJSnoob

媒体的初始状态是什么（无声或无声）？检查'img'标记的源值可能不是确定状态的好方法，尤其是因为源值是您的切换所改变的。你能提供HTML标记吗？ – piersadrian

请发表答案*为答案;那么它可以被接受并且问题被解决。 –

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

$("#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; 
     } 
    }

来源

2011-12-11 20:22:39 IamaJSnoob

$('#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/更新

来源

2011-12-11 00:37:47 Jasper

虽然这并没有解决这个问题。 OP的问题是关于他/她的_detection_机制，这可能表明一个基本的设计问题。我上面要求澄清。 – piersadrian

@PiersMainwaring我添加了代码来将状态存储在我的两个示例的'data-muted'属性中。如果您在开发人员控制台中观看图像元素，则可以看到'data-muted'属性与源切换。 – Jasper

谢谢你摇滚！ – IamaJSnoob

切换静音Javascript功能与Jquery切换

回答

相关问题