如果未找到动态音频 src 或为 null,请使用 javascript 隐藏 HTML5 音频播放器
Hide HTML5 audio player using javascript if dynamic audio src is not found or is null
Stackoverflow上的第一篇文章,请耐心等待。我有一个 JQMobile 网络应用程序,它通过 JSON 生成动态音频文件链接并为每个 id 附加音频播放器。我试图在找不到 src 时隐藏播放器。
php/mysql/jqm 脚本正在工作,我似乎无法获得 if/else 部分,它总是显示播放器是否为空。
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<script type="text/javascript">
var serviceURL = "http://localhost/Apps/services/";
$(document).on('pageshow', '#detailsPage', function(event) {
var id = getUrlVars()["id"];
$.getJSON(serviceURL + 'getartist.php?id='+id, displayArtist);
});
function displayArtist(data) {
var artistDetVal = data.item;
console.log(artistDetVal);
$('#artistDetPic').attr('src', 'pics/lg/' + artistDetVal.picture);
$('#fullName').text(artistDetVal.firstName + ' ' + artistDetVal.lastName);
$('#artistDetTitle').text(artistDetVal.bio);
$('#city').text(artistDetVal.city);
$('#audioBio').attr('src', 'audio/' + artistDetVal.audio) .detach().appendTo($("#audioPlayer"));
}
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
</script>
<body>
<script type="text/javascript">
$(document).ready(function(){
function displayArtist(data) {
var artistDetVal = data.item;
$('#audioBio').text(artistDetVal.audio);
if (artistDetVal.audio>0) {
$("#audioPlayer").show();
}
else {
$("#audioPlayer").hide();
}
}
});
</script>
<audio id="audioPlayer" controls="controls"><source id="audioBio" src=""/></audio>
</body>
</html>
似乎您的函数displayArtist
被声明了两次,这是一个"禁忌"。此外,永远不会调用第二个声明,即控制是显示还是隐藏播放器的声明。
尝试将显示/隐藏播放器的逻辑放在displayArtist
的第一个实例中,并完全删除重复项。
function displayArtist(data) {
var artistDetVal = data.item;
console.log(artistDetVal);
$('#artistDetPic').attr('src', 'pics/lg/' + artistDetVal.picture);
$('#fullName').text(artistDetVal.firstName + ' ' + artistDetVal.lastName);
$('#artistDetTitle').text(artistDetVal.bio);
$('#city').text(artistDetVal.city);
$('#audioBio').attr('src', 'audio/' + artistDetVal.audio).detach().appendTo($("#audioPlayer"));
$('#audioBio').text(artistDetVal.audio);
if (artistDetVal.audio>0) {
$("#audioPlayer").show();
}
else {
$("#audioPlayer").hide();
}
}
此外,如果artistDetVal.audio
是一个字符串,您可能希望使用条件if(artistDetVal.audio.length > 0)
相关文章:
- 如果类中的数字大于0,请使用JavaScript更改CSS背景
- 从 Web SQL 数据库检索音频并使用 Web 音频 API 播放
- jshint 错误:“EOL 转义错误.如果需要,请使用选项 multistr“,但 multistr 是正确的
- 网络音频:如何使用移动麦克风从远处拾取音频
- 无法访问FTP来安装滑块模块,请使用外部源
- 错误:this.setValues不是js代码中的函数,请使用googlemapapi
- 使用location时Javascript未重新加载页面.请使用相同的URL再次加载
- 如果传递了DateTime变量,请使用Javascript更改Div类
- 布局lt md已被弃用.请使用`layout gt-<xxx>`变种
- 如果在具有单独作用域的其他指令中,请使用ng
- 删除一个元素,如果它包含某些内容,请使用 GreaseMonkey 中的 jQuery
- 如果用户发送另一个请求,请使用 .abort() 取消现有的 ajax 请求
- 使用 Web 音频 API 使用 start/noteOn 进行非法调用
- 如果未找到动态音频 src 或为 null,请使用 javascript 隐藏 HTML5 音频播放器
- JSFiddle “请使用后请求”错误
- 无法处理绑定,请使用 ko.mapping.fromJS 将 JSON 数据推送到 ObservableArray
- 我想将不存在的项目推送到已经声明的对象中,如果它们尚不存在,请使用 lodash 进行角度
- 如果不支持 Html 5,请使用 Flash 动画
- 如果将php和javascript混合在一起不起作用,请使用简写
- 在需要模块之前,请使用require.js运行公共代码