如何隐藏一个元素，如果存在另一个元素

我有一个按钮，类名为ADD创建一个i帧。如何隐藏一个元素，如果存在另一个元素

当点击添加我想隐藏按钮，如果该iframe创建。有没有办法使用classname隐藏div：在iframe创建后添加？

这里是我的代码片段：

$(document).ready(function() { 
 
    $(".adding").click(function(e) { 
 
    e.preventDefault(); 
 
    $('#iframeplace').html('<span class="loading">LOADING...</span>'); 
 

 
    setTimeout(function() { 
 
     $("#iframeplace").html("<iframe name='someFrame' id='someFrame' width='560' height='315'></iframe>"); 
 
    }, 3000); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="secondpage.html" class="adding"> 
 
    <div class="ADD">ADD</div> 
 
</a> 
 
<div id="iframeplace"></div>

来源

2017-01-02 inaz

有很多更多的帮助和有趣的问题未得到甚至一度upvoted这个，小事一桩了7个upvotes。 Hillarious。 –

如果像这样的东西不是重复的，它肯定会对很多人有帮助。对于初学者来说，微不足道的小事。 – JollyJoker

@JollyJoker是的，但upvotes是质疑质量，而不是问题本身。“如何治疗癌症”（在一个合适的SE网站上）并不是一个好问题，因为即使它对许多人有帮助，也没有研究或以前的尝试。但是，这种误解（或反射）不幸在整个网络中非常普遍，而不仅仅是这篇文章。 – Kroltan

可以实现通过使用.length返回指定的选择元素的数量。在你的情况下，选择器将是#iframeplace。

如何隐藏该项目完全取决于您 - 您可以使用jQuery hide方法或使用CSS隐藏它。

$(document).ready(function() { 
 
    $(".adding").click(function(e) { 
 
    e.preventDefault(); 
 
    $('#iframeplace').html('<span class="loading">LOADING...</span>'); 
 

 
    setTimeout(function() { 
 
     $("#iframeplace").html("<iframe name='someFrame' id='someFrame' width='560' height='315'></iframe>"); 
 
    }, 3000); 
 
    
 
    if($('#iframeplace').length == 1) 
 
    { 
 
     $(".adding").hide(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="secondpage.html" class="adding"> 
 
    <div class="ADD">ADD</div> 
 
</a> 
 
<div id="iframeplace"></div>

来源

2017-01-02 09:43:51

非常感谢！ – inaz

@inaz不客气！ ;） –

很难说哪一种风格a和嵌套div有，所以你可以隐藏或者与类名addinga或div与类名ADD。无论如何，你需要在iframe加载后做到这一点。

$(document).ready(function() { 
 
    $(".adding").click(function(e) { 
 
    e.preventDefault(); 
 
    $('#iframeplace').html('<span class="loading">LOADING...</span>'); 
 

 
    setTimeout(function() { 
 
     $("#iframeplace").html("<iframe name='someFrame' id='someFrame' width='560' height='315'></iframe>"); 
 
     $(".ADD").css("display", "none"); 
 
    }, 3000); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="secondpage.html" class="adding"> 
 
    <div class="ADD">ADD</div> 
 
</a> 
 
<div id="iframeplace"></div>

来源

2017-01-02 09:45:43 Banzay

您可以使用jQuery通过.hide()，.fadeOut()隐藏在不同的充方式元素，.slideUp()

或使用display:none

如果你想要的元素，以保持CSS其空间那么你需要使用，

$('.ADD').css('visibility','hidden')

如果你不想要的元素保留它的空间，那么你可以使用，

$('.ADD').css('display','none')

$(document).ready(function() { 
 
    $(".adding").click(function(e) { 
 
    e.preventDefault(); 
 
    $('#iframeplace').html('<span class="loading">LOADING...</span>'); 
 

 
    setTimeout(function() { 
 
     $("#iframeplace").html("<iframe name='someFrame' id='someFrame' width='560' height='315'></iframe>"); 
 
     $(".adding").hide(); 
 
    }, 3000); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="secondpage.html" class="adding"> 
 
    <div class="ADD">ADD</div> 
 
</a> 
 
<div id="iframeplace"></div>

来源

2017-01-02 09:52:40

尝试这样的事情。

添加此条件。

if($("#iframeplace").contents().find("iframe")){ 
    $(".ADD").css('display','none');  
}

$(document).ready(function() { 
 
    $(".adding").click(function(e) { 
 
    e.preventDefault(); 
 
    $('#iframeplace').html('<span class="loading">LOADING...</span>'); 
 
    if($("#iframeplace").contents().find("iframe")){ 
 
     $(".ADD").css('display','none'); \t 
 
    } 
 

 
    setTimeout(function() { 
 
     $("#iframeplace").html("<iframe name='someFrame' id='someFrame' width='560' height='315'></iframe>"); 
 
    }, 3000); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<a href="secondpage.html" class="adding"> 
 
    <div class="ADD">ADD</div> 
 
</a> 
 
<div id="iframeplace"></div>

来源

2017-01-02 09:53:29

如何隐藏一个元素，如果存在另一个元素

回答

相关问题