Question

这是我的代码

<!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()无效。我想在按钮＆＃34;停止播放时从我的网站上删除播放列表。单击按钮＆＃34;播放＆＃34;再次显示播放列表点击。

我以前的代码不包括if / else所以当我点击＆＃34;播放＆＃34;时，播放列表会出现另一个，另一个，另一个，但我希望它出现1次，如果我点击＆＃34;停止＆＃34;，它已经消失，如果我点击＆＃34;播放＆＃34;，它会再次出现。

有人可以帮忙吗？请。

Answer 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 );
        });

    });

请注意，HTML5中不推荐使用<center>标记。

<强> jsBin demo

Answer 2

不是$(SELECTOR).visible(true)更合适吗？ jQuery中没有这样的函数if ($('#musicbox').is(':visible') { //do stuff }。

if (new[] { "+" ,  "1" ,  "2" ,  "3" ,  "4" ,  "5" ,  "6" , "7" ,  "8" ,  "9" , "0" }.Contains(justThePlus));
{

}

Answer 3

尝试这样的事情：

$("#stopmusic").click(function(){
     $("#musicbox").empty();
});
$("#playmusic").click(function(){
     if ($('#musicbox iframe').length < 1) {
         $('#musicbox').html('<iframe src="youtube_playlist" width="300px" height="60px" scrolling="no" />')
    }        
});

Answer 4

$("#stopmusic").click(function(){
    $("#musicbox").empty();
});

$("#playmusic").click(function(){
    if ($('#musicbox').html() == '') {
      $('#musicbox').append('<iframe src="youtube_playlist" width="300px" height="60px"        scrolling="no" />')
   }        
});

Answer 5

这是工作示例

＆＃13;

$(document).ready(function() {
  $("#stopmusic").click(function() {
    $("#musicbox").empty();
  });
  $("#playmusic").click(function() {
    $('#musicbox').html('<p>Test</p>');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<center>
  <button id="playmusic">Play</button>
  <button id="stopmusic">Stop</button>
  <br>
  <div id="musicbox">
    <p>Test</p>
  </div>
</center>

＆＃13;

Answer 6

尝试使用以下更新的脚本代码

$(document).ready(function(){
        $("#stopmusic").click(function(){
            $("#musicbox").empty();
        });
        $("#playmusic").click(function(){
            if ($('#musicbox iframe').is(':visible')) {
                $('#musicbox').append('');
            }  
            else {
                $('#musicbox').append('<iframe width="560" height="315" src="https://www.youtube.com/embed/flMDiQib1J4?list=PL7W4kY6q3mxsiAgJNh1BlEWGI3PXBUqju" frameborder="0" allowfullscreen></iframe>');
            }        
        });
    });

Answer 7

试试这个，

    .......
$("#playmusic").click(function(){
                if ($('#musicbox > iframe').length>0) {
                    $('#musicbox').append('');
                }  
                else {
                    $('#musicbox').append('<iframe src="youtube_playlist" width="300px" height="60px" scrolling="no" />')
                }        
            });
.........

请修改代码append（）和empty（）

7 个答案: