javascript - event.preventdefault() 问题 - 尝试阻止 anchor 标记加载

Question

我正在设置一个动态且响应式的视频库，您在其中单击缩略图，它会在更大的 <div> 中加载随附的视频。它上面。我遇到的问题是 event.preventdefault()显然不起作用，因为它仍然链接到 YouTube 而不是加载它。如有任何帮助，我们将不胜感激。

HTML

        <div class="mainvideo">
            <iframe src="https://www.youtube.com/watch?v=UAQ9-sl13zg" frameborder="0" allowfullscreen></iframe>
            <div id="mainvideowords">
                <h2>#</h2>
                <h3>#</h3>
            </div>
        </div>

        <div id="videogallery">

            <div class="littlevideo">
                <a href="https://www.youtube.com/embed/HsuzKk6udK8" class="video1"><img src="assets/placeholder.png"></a>
                <div class="littlevideowords">
                    <h4>#</h4>
                    <p>#</p>
                </div>
            </div>

JS

$(".video1, .video2, .video3").on("click", function(event) {
    event.preventDefault();
    $(".mainvideo iframe").prop("src", $(event.currentTarget).attr("src"));
});

Answer 1

虽然没有回答为什么 event.preventDefault() 不起作用，但我将如何解决这个问题。我会将 html 调整为如下所示:

<div class="mainvideo">
   <iframe id="playVideo" src="https://www.youtube.com/watch?v=UAQ9-sl13zg" frameborder="0" allowfullscreen ></iframe>
 // notice ^^^^^^^^^^^^^^
        <div id="mainvideowords">
       // rest of your code

<div id="videogallery">
    <div class="littlevideo">
        <div data-link="https://www.youtube.com/embed/HsuzKk6udK8" class="video1">
       // notice ^^^^^   
    <img src="assets/placeholder.png"></div>

那么你的 jquery 将如下所示:

$(function(){
    $('div[class^="video"]').click(function(){
        var src = $(this).data('link');
        $('#playVideo').prop('src', link);
    });
});

开头的选择器选择任何类以“video”开头的 div，因此您不必重复 video1、video2 等。然后，我们向单击的 div 添加了一个自定义 html5 数据属性使用 .data('src') 行访问。请参阅此处的文档:http://api.jquery.com/data/和 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes .

最后，通过向 iframe 添加 id，我们可以直接选择它并更改视频的 src。

这是给你的 fiddle :http://jsfiddle.net/1sLdkyr2/1/