jQuery - 将类添加到 li，默认从其他类中删除答案

【问题标题】：jQuery - add class to li, remove from others with defaultjQuery - 将类添加到 li，默认从其他类中删除
【发布时间】：2012-08-10 20:16:13
【问题描述】：

尝试为 iframe 中正在播放的缩略图视频添加边框。

$('document').ready(function(){ $("#video-thumbs li").click(function(e){ e.preventDefault(); $("#video-thumbs li").addClass("current").not(this).removeClass("current"); }); });

<iframe width="1020" height="574" id="myvideo" src="http://www.youtube.com/embed/Qdse1SEBimw" frameborder="0" allowfullscreen=""></iframe>
<ul id="video-thumbs">
    <li class="current" style="margin-left: 0;">
    <div id="playbtn" onclick="document.getElementById('myvideo').src='http://www.youtube.com/embed/Qdse1SEBimw'"></div>
    <img src="files/lamb.png" width="326" height="181">
    </li>
    <li>
    <div id="playbtn" onclick="document.getElementById('myvideo').src='http://www.youtube.com/embed/WZknytdWWhI'"></div>
    <img src="files/tuna.png" style="width: 326px">
    </li>
    <li style="margin: 0 0 0 11px">
    <div id="playbtn" onclick="document.getElementById('myvideo').src='http://www.youtube.com/embed/BAembvTjChs'"></div>
    <img src="files/myers.png" width="326" height="181">
    </li>
</ul>

【问题讨论】：

我不确定你到底想问什么，因为它有点令人困惑。我假设你在其他视频上都有“当前”课程。我会删除每一个当前先上课然后做$('this').addClass("current");我希望这会有所帮助，但如果你能更清楚一点，也许我可以提供帮助。
你的代码在这里工作正常jsfiddle.net/wirey00/pPgmm
您说您正在尝试为 iframe 中的视频添加边框，但您的代码只是为 iframe 之外的元素添加和删除了一个类。 iframe 中有什么？
iframe 播放大视频。下面的缩略图替换了 iframe 中嵌入的链接。我希望边框位于 iframe 中的任何缩略图视频上。

标签： jquery

【解决方案1】：

改变你的逻辑：

$('document').ready(function(){

    $("#video-thumbs li").click(function(e){
        e.preventDefault();
        $("#video-thumbs li").removeClass("current"); // Remove all instances
        $(this).addClass("current"); // Add `.current` to $(this) object only
    });

});

【讨论】：

我看不出他的逻辑有缺陷。添加到所有然后从除当前点击之外的所有内容中删除？我认为这可能是因为它在 iframe 内
nvm.. 它不在 iframe 中
或者由于所有的 li 元素都是同级元素，$(this).addClass("current").siblings().removeClass("current"); 会更简洁并针对确切的元素，但同样，这正是问题所在，可能不是问题？
会不会和div里面的onclick函数冲突？
@adeneo 简直不敢相信我错过了那个大声笑……哇，这是漫长的一天

【解决方案2】：

尝试以不同的方式构建 HTML，并删除那些难看的 onclick 函数：

<iframe width="1020" height="574" id="myvideo" src="http://www.youtube.com/embed/Qdse1SEBimw" frameborder="0" allowfullscreen=""></iframe>
<ul id="video-thumbs">
    <li style="margin-left: 0;">
        <div class="playbtn" data-url='http://www.youtube.com/embed/Qdse1SEBimw'></div>
        <img src="files/lamb.png" width="326" height="181" class="current">
    </li>
    <li>
        <div class="playbtn" data-url='http://www.youtube.com/embed/WZknytdWWhI'></div>
        <img src="files/tuna.png" style="width: 326px">
    </li>
    <li style="margin: 0 0 0 11px">
        <div class="playbtn" data-url='http://www.youtube.com/embed/BAembvTjChs'></div>
        <img src="files/myers.png" width="326" height="181">
    </li>
</ul>

现在做一些 jQuery 的东西：

$(function(){
    $("#video-thumbs li").on('click', function(){
        $(this).find('img').addClass("current").end()
               .siblings().find('img').removeClass("current");
        $("#myvideo").prop('src', $(this).find('div').data('url'));
    });
});

它应该可以正常工作吗？这是FIDDLE

【讨论】：