Question

我是新手，也是JavaScript和JQuery的新手。

我一直在制作一个小脚本，让我的页面部分切换来自Youtube的视频。

我遇到的问题是缩略图是否已选择＆＃39;添加我想禁用点击功能来停止视频重新加载 - 有一个简单的方法吗？

我试图在JQuery中添加另一部分来查找＆＃39;选择＆＃39; class并返回false但我知道这是错误的，因为这将停止默认的浏览器行为而不是click事件。

此外，我非常感谢代码建议的解释以及改进/简化我的JQuery代码的建议。

提前致谢！

HTML：

<iframe id="vid" width="980" height="551" src="http://www.youtube.com/embed/hziG9Nr6KHU?&rel=0&amp;controls=4&amp;wmode=transparent&modestbranding=1&rel=0&showinfo=1" frameborder="0" allowfullscreen></iframe>

<ul id="videos">
    <li id="one">
        <a class="selected" href="http://www.youtube.com/embed/hziG9Nr6KHU?&rel=0&amp;controls=2&amp;wmode=transparent&modestbranding=1&rel=0&showinfo=1&autoplay=1 ">
            <img src="http://placehold.it/320x180" />
            <span class="AGreg">Vid1</span>
        </a>
    </li>
    <li id="two" class="left">
        <a href="http://www.youtube.com/embed/V1bFr2SWP1I?&rel=0&amp;controls=2&amp;wmode=transparent&modestbranding=1&rel=0&showinfo=1&autoplay=1 ">
            <img src="http://placehold.it/320x180" />
            <span class="AGreg">Vid12</span>
        </a>
    </li>
    <li id="three" class="left">
        <a href="http://www.youtube.com/embed/XLgYAHHkPFs?&rel=0&amp;controls=2&amp;wmode=transparent&modestbranding=1&rel=0&showinfo=1&autoplay=1 ">
            <img src="http://placehold.it/320x180" />
            <span class="AGreg">Vid3</span>
        </a></li>
</ul>

CSS：

iframe#vid{width:980px;height:551px;}
.selected img{
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */}

#videos .cursorD a{cursor:default!important}

#videos a:hover img{
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */}

ul#videos{margin:20px 0;padding:0;}
ul#videos img{}
ul#videos li{float:left;width:320px;}
ul#videos li.left{margin:0 0 0 10px}

JQUERY：

$(document).ready(function(){
        $("ul#videos li a").click(function(){
            $("iframe").attr("src", $(this).attr("href"));
            $(this).closest('ul#videos').find('.selected').removeClass('selected');
            $(this).parent().addClass('selected cursorD');
            return false;
        })  
    });

CODEPEN ：http://codepen.io/PixelsPencil/pen/uljzy

Answer 1

您可以根据需要删除点击视频上的事件处理程序，但这需要一些代码。一个更容易和（i.m.h.o.更优雅）的解决方案是调整你的选择器/事件处理程序连接，使它只在没有类＆＃34;选择＆＃34;：

的元素上执行

$(document).ready(function(){
    $("ul#videos li a:not('.selected')").click(function(){
        $("iframe").attr("src", $(this).attr("href"));
        $(this).closest('ul#videos').find('.selected').removeClass('selected');
        $(this).parent().addClass('selected cursorD');
        return false;
    })  
});

我必须承认，我没有对它进行测试，而且我对:xyz()类型选择器的评估优先级并不是100％肯定。为了更加确定正在发生的事情，您可以将单选择器更改为选择器链：

$("ul#videos").find("li").find("a:not('.selected')").click( ... );

甚至更好，将事件处理程序挂钩到父对象，但只让它触发不同的元素（也通过选择器表示）：

$("ul#videos").on("click", "li a:not('.selected')", function() { ... });

这有一个额外的魅力，处理程序将自动适用于连接事件处理程序后添加的li。

Answer 2

这似乎有用 - 请一些人寻求帮助，一位同事提出这个仍然不确定为什么/如何运作但是确实如此。

var VideoLoader = { 
registerClickHandlers: function() {     
    $("ul#videos li a").click(VideoLoader.showSelectedVideo);
},  
    showSelectedVideo: function() {

        if(!VideoLoader.checkVideoIsAlreadyPlaying(this)) {

            $("iframe").attr("src", $(this).attr("href"));

       $(this).closest('ul#videos').find('.selected').removeClass('selected cursorD');
       $(this).parent().addClass('selected cursorD');

    }

    return false;
},

    checkVideoIsAlreadyPlaying: function(clickedObject) {           
        return $(clickedObject).parent().hasClass("selected");  
    }
};

$(document).ready(VideoLoader.registerClickHandlers);

在此处更新了我的Codepen：http://codepen.io/PixelsPencil/pen/uljzy

Answer 3

再次感谢您的回复！哈哈，我曾经玩过一段戏，并且在jsfiddle上放了一些东西，但是现在认为它比以往更加突破了哈哈。当我点击未选择类的东西时，所有拇指都会更改类，当我点击选定的类时，视频会加载到父级而不是切换iframe中的attr - 我出错的任何想法？ jsfiddle.net/wvPnA

删除已添加“已选择”类的项目上的点击事件

3 个答案: