2017-01-02 3 views
5

У меня есть кнопка с именем класса ADD для создания i-кадра.Как скрыть элемент, если существует другой элемент

при нажатии на добавление Я хотел бы скрыть кнопку, если это iframe создает. есть ли способ скрыть 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>

+4

Есть много более полезных и интересных вопросов, которые даже не получать upvoted раз и это тривиальный один получил 7 upvotes. Hillarious. –

+0

Если что-то подобное не является дубликатом, оно обязательно будет полезно для многих. Для новичка тривиальный не является тривиальным. – JollyJoker

+0

@JollyJoker Да, но upvotes предназначены для допроса качества, а не самого вопроса.«Как вылечить рак» (на соответствующем сайте SE) не будет хорошим вопросом, потому что, хотя это было бы полезно многим, не было ни исследований, ни предыдущих попыток сделать это. Но это заблуждение (или рефлекс), к сожалению, очень распространено по всей сети, а не только на этом посту. – Kroltan

ответ

7

Вы можете добиться того, что с помощью .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>

+1

Большое вам спасибо! – inaz

+0

@inaz Добро пожаловать! ;) –

2

Трудно сказать, какой стиль a и вложенным div есть, так что вы можете скрыть a с именем класса adding или 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>

1

Вы можете использовать JQuery, чтобы скрыть элемент различно способами .hide(), .fadeOut(), .slideUp()

или CSS, используя display:none

Если вы хотите, чтобы элемент, чтобы сохранить его пространство, то вам необходимо использовать,

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

0

Попробуйте что-то вроде этого.

Добавить это условие.

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>

Смежные вопросы