移除添加类别为'selected'的项目上的点击事件

Remove click event on item with added class of 'selected'

本文关键字：项目 事件 selected 添加      更新时间：2023-09-26

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

我一直在写一个小脚本，让我的页面从Youtube上切换视频的一部分。

我遇到的问题是，当缩略图添加了"选定"类时，我想禁用点击功能以停止视频重新加载-是否有一个简单的方法?

我试图把另一点JQuery在找到项目与'selected'类和返回false，但我知道这是错误的，因为这将停止默认的浏览器行为，而不是点击事件。

我也非常感谢你对代码建议的解释，以及改进/简化我的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

您可以随心所欲地删除点击视频上的事件处理程序，但这需要一些代码。一个更简单和(i.m.h.o.更优雅)的解决方案是调整你的选择器/事件处理程序连接，使它只在没有类"selected"的元素上执行:

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

我必须承认，我没有测试它，我不能100%确定:xyz()类型选择器的评估优先级。要更确定正在发生什么，您可以将单个选择器更改为选择器链:

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

或者更好的是，将事件处理程序与父对象挂钩，但只在不同的元素上触发(也通过选择器表示):

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

这具有附加的魅力，处理程序将自动工作于在连接事件处理程序后添加的li。

这似乎有效-向几个人寻求帮助，一位同事想出了这个仍然不确定为什么/如何工作，但它确实有效。

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

感谢您的回复!我有一个剧本，在jsfiddle上放了一些东西，但现在它比以前更坏了，哈哈。当我点击一些没有选择的类所有拇指改变类，当我点击一个选定的类视频加载在父，而不是切换在iframe的attr -任何想法我哪里错了??jsfiddle.net/wvPnA
相关文章：