JQuery это родительский селектор пред не работает

Question

мне нужно скрыть текущее изображение и показывать видео окно, которое является кузеном родительского элемента

У меня есть это:

<script> 
 
$(document).ready(function(){ 
 
\t $("#preview-box-playvideo-btn").click(function(){ 
 
\t \t $(this).closest("#preview-box-img").css("display","none"); 
 
\t \t $(this).closest("#preview-box-img").prev().fadeIn(600); 
 
\t }); 
 
}); 
 
</script>

<div class="prev-img"> 
 
\t \t \t <div id="preview-box-video"> 
 
\t \t \t \t <embed id="" width="348" height="196" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" allowscriptaccess="always" quality="high" bgcolor="#000000" name="my-video" src="http://www.youtube.com/v/kRyPMsYGb74?enablejsapi=1&version=3&playerapiid=ytplayer&ps=play&vq=large&rel=0&autohide=1&showinfo=0&autoplay=1&authuser=0" type="application/x-shockwave-flash"> 
 
\t \t \t \t <div id="preview-box-closevideo-btn">X</div> 
 
\t \t \t </div> 
 
\t \t \t <div id="preview-box-img"> 
 
\t \t \t \t <img src="http://www.img3.9minecraft.net/France/Texture-Pack/Atherys-ascended-texture-pack-3.jpg" height="196" width="348"> 
 
\t \t \t \t <div id="preview-box-playvideo-btn"> 
 
\t \t \t \t \t <span>Reproducir video</span> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div>

Пожалуйста, мне нужна помощь. Я не понимаю, почему это не работает.

Answer 1

Если у вас нет в документе тот же div вы можете использовать:

$("#preview-box-img").css("display","none"); 
$("#preview-box-img").prev().fadeIn(600); 

Если этот код не работает, вы должны быть уверены, что ваш обработчик щелчка ОК.

Answer 2

В коде, который вы показываете здесь, селектор prev() на самом деле работает. Из того, что вы описали, я предполагаю, что вы говорите, что он не работает, потому что видео не появляется. Это правильно?

Не знаете, почему вы решили использовать тег <embed> для встраивания видео в формате youtube. Предпочтительным способом было бы использовать iframe. Если вы идете к видео на YouTube и нажмите на кнопку «Поделиться» -> «Вставить», вы получите следующий код, который вы можете использовать на вашем сайте: <iframe width="348" height="196" src="https://www.youtube.com/embed/kRyPMsYGb74" frameborder="0" allowfullscreen></iframe>

Вот демо, используя iframe вместо embed. Также css, чтобы скрыть видео сначала. Как вы можете видеть, ваш JS такой же, и он отлично работает, скрывая изображение и показывая видео.

$(document).ready(function() { 
 
    $(".preview-box-playvideo-btn").click(function() { 
 
    $(this).closest(".preview-box-img").css("display", "none"); 
 
    $(this).closest(".preview-box-img").prev().fadeIn(600); 
 
    }); 
 
});

.preview-box-video { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="prev-img"> 
 
    <div class="preview-box-video"> 
 
    <iframe width="348" height="196" src="https://www.youtube.com/embed/kRyPMsYGb74" frameborder="0" allowfullscreen></iframe> 
 
    <div class="preview-box-closevideo-btn">X</div> 
 
    </div> 
 
    <div class="preview-box-img"> 
 
    <img src="http://www.img3.9minecraft.net/France/Texture-Pack/Atherys-ascended-texture-pack-3.jpg" height="196" width="348"> 
 
    <div class="preview-box-playvideo-btn"><span>Reproducir video</span> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 3

Вы используете идентификаторы в HTML, но затем использовать селекторы, как вы использовали классы. Я предпочитаю использовать классы, но в вашем случае, учитывая ваши идентификаторы, это проще.

<script> 
    $(document).ready(function(){ 
$("#preview-box-playvideo-btn").click(function(){ 
    $("#preview-box-img").hide(); 
    $("#preview-box-video").fadeIn(600); 
}); 

});

Это бессмыслица, которая имеет идентификаторы, а затем пересекает дерево dom, когда вы можете использовать идентификаторы для непосредственного выбора элементов (например, при назначении события нажатия на кнопку).

Если вы делаете это с помощью классов, то безопаснее найти содержащий div для обоих элементов с ближайшим, а затем найти детей из него с помощью find.