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

开头的选择器选择任何以“视频”开头的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。

这是你的小提琴：http://jsfiddle.net/1sLdkyr2/1/

event.preventdefault（）问题 - 试图阻止加载锚标记

1 个答案: