Question

我有一个类名为 ADD 的按钮来创建一个i-frame。

点击添加后，如果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>

Answer 1

您可以使用.length来实现这一点，#iframeplace返回指定选择器的元素数。在您的情况下，选择器将是hide。

如何隐藏项目完全取决于您 - 您可以使用jQuery $(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(); } }); });方法或使用CSS隐藏它。

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

SET FOREIGN_KEY_CHECKS=0; -- to disable them
SET FOREIGN_KEY_CHECKS=1; -- to re-enable them

Answer 2

很难说哪种格式a和嵌套div具有哪种格式，因此您可以隐藏a类名adding或div使用类名ADD。无论如何，你需要在iframe加载后进行。

＆＃13;

$(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);
  })
});

＆＃13;

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

＆＃13;

Answer 3

您可以使用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>

Answer 4

尝试这样的事情。

添加此条件。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: