如何隱藏一個元素，如果存在另一個元素

我有一個按鈕，類名爲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

如何隱藏一個元素，如果存在另一個元素

回答

相關問題