这是我的代码
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#stopmusic").click(function(){
$("#musicbox").empty();
});
$("#playmusic").click(function(){
if ($('#musicbox').visible( true )) {
$('#musicbox').append('');
}
else {
$('#musicbox').append('<iframe src="youtube_playlist" width="300px" height="60px" scrolling="no" />')
}
});
});
</script>
</head>
<body>
<center>
<button id="playmusic">Play</button>
<button id="stopmusic">Stop</button><br>
<div id="musicbox">
<iframe src="youtube_playlist" width="300px" height="60px" scrolling="no" />
</div>
</center>
</body>
</html>
empty() 正常，但 append() 不工作。我想在单击“停止”按钮时从我的网站上删除播放列表，并在单击“播放”按钮时再次显示播放列表。
我以前的代码不包括 if/else 所以当我点击“播放”时，播放列表会出现一个，另一个，另一个，但我希望它出现 1 次，如果我点击“停止”，它就消失了，如果我点击“播放”，又出现了。
有人可以帮忙吗？请。
最佳答案
不是操纵内部 HTML，
你可以简单地 show/hide
$(document).ready(function(){
$("#stopmusic, #playmusic").click(function() {
$("#musicbox").toggle();
});
});
我不确定您的 iframe 是否包含可播放的视频内容(因为您使用了伪 src)。
如果您想停止播放 iframe:
$(function(){ // DOM ready shorthand
var $mBox = $("#musicbox");
var iframe = $("iframe")[0].outerHTML;
$("#stopmusic, #playmusic").click(function() {
$mBox.html( this.id==="stopmusic" ? "" : iframe );
});
});
请注意 <center>标记在 HTML5 中已弃用。
关于javascript - 请修复代码 append() 和 empty()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30303505/