Question

我试图制作两个按钮作为删除和添加功能首先我有这个：

HTML

<video id="localVideo" style="background-color:black"></video>
<div id="remoteVideos"></div>

按钮

<button id="BtnOn">On</button>
<button id="BtnOff">Off</button>

脚本：

$(document).ready(function() {

            //$("#BtnOn").click(function() {
             //   $('#A').append("<div id='localVideo'>");
             //   $('#A').append("<div id='remoteVideos'>");            
        //});

            $("#BtnOff").click(function() {
                $("#localVideo").remove();
        $("#remoteVideos").remove();
        });    
            });

我想要做的就是删除2个div并且能够返回它们，条件是只有丢失它们才能添加它们，如果它们存在则删除它们，因此将它们限制为1加1除去。我怎样才能做到这一点？感谢任何帮助建议

Answer 1

您可以检查#localVideo元素是否存在。另外，如果它们是#A元素中的唯一元素，则可以通过调用$('#A').empty();将其删除。

$(document).ready(function() {
    $('#BtnOn').click(function() {
        if ($('#localVideo').length == 0) {
            $('#A').append('<video id="localVideo" style="background-color:black"></video><div id="remoteVideos"></div>');
        }
    });

    $('#BtnOff').click(function() {
        if ($('#localVideo').length > 0) {
            $("#localVideo").remove();
            $("#remoteVideos").remove();
        }
    });    
});

您还可以考虑隐藏和显示视频元素，而不是添加和删除它们。

Answer 2

您可以将CSS .append()属性更改为.remove()或display，而不是使用none和initial，具体取决于您是否希望是否显示。

这样，您就可以像这样添加if语句：

$("#BtnOff").click(function() {
    if('#localvideo').css('display') == 'none'){
        //do nothing
    } else {
        $('#localVideo').css('display','none');
        $('#remoteVideos').css('display','none');
    }
});

Jquery使用append添加并使用.remove删除

2 个答案: