javascript - function.js 中的 this.nextSibling

Question

我在我的 html 页面中使用此代码。单击图像“photo_medias”时，图像消失并显示视频 iframe。它工作正常，但我想用这段代码制作一个 jQuery 函数。我不想在我的 HTML 中包含 JavaScript。有人可以帮我吗？

<li class="mix videos">
    <div onclick="this.nextSibling.style.display='block'; this.style.display='none'">
        <img src="http://img.youtube.com/vi/<?php the_sub_field('youtube'); ?>/0.jpg" class="photo_medias" style="cursor:pointer" />
    </div>
    <div style="display:none">
        <iframe class="youtube"  src="//www.youtube.com/embed/<?php the_sub_field('youtube'); ?>" frameborder="0" allowfullscreen></iframe> 
    </div>
</li>

Answer 1

你可以做

小提琴演示

$('.mix.videos div').click(function () {
    $(this).hide().siblings().show();
});

---

或者

小提琴演示

$('.mix.videos div').click(function () {
    $(this).hide();
    next_el = $(this).next().length ? $(this).next() : $(this).closest('.mix.videos').children().first();
    next_el.show();
});