Cách ẩn phần tử nếu phần tử khác tồn tại

Question

Tôi có nút có tên lớp là ADD để tạo i-frame.

khi được nhấp vào thêm tôi muốn ẩn nút nếu iframe đó tạo. có cách nào để ẩn div với classname: thêm sau khi tạo iframe?

Dưới đây là đoạn mã của tôi:

$(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>

Answer 1

Bạn có thể đạt được điều đó bằng cách sử dụng .length mà trả về số nguyên tố cho selector cụ thể. Trong trường hợp của bạn, bộ chọn sẽ là #iframeplace.

Cách bạn ẩn mục hoàn toàn tùy thuộc vào bạn - bạn có thể sử dụng phương thức jQuery hide hoặc ẩn nó bằng cách sử dụng 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>

Answer 2

Thật khó để nói trước với các phong cách a và lồng div có, vì vậy bạn có thể ẩn a với tên lớp adding hoặc div với tên lớp ADD. Dù sao bạn cần phải làm điều đó sau khi tải khung nội tuyến.

$(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>

Answer 3

Bạn có thể sử dụng jquery để ẩn phần tử trong cách differnt bởi .hide(), .fadeOut(), .slideUp()

hoặc bằng css sử dụng display:none

Nếu bạn muốn phần tử để giữ nó không gian bạn cần sử dụng,

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

Nếu bạn không muốn yếu tố để duy trì không gian của nó, sau đó bạn có thể sử dụng,

$('.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>

Answer 4

Cố gắng một cái gì đó như thế này.

Thêm điều kiện này.

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>