Question

我有两个功能，一个在点击时播放视频（并更改播放的视频），然后一个应该使DIV的不透明度变为零的功能。我试图将它们组合在一起，因为你应该点击相同的位置来激活它们，但它不起作用。

出于某种原因，当我放入包含视频的div（即使没有它的功能）时，第二个功能停止工作。我该怎么做才能使用呢？

视频播放器的功能是：

$(window).load(function(){
    $('li', '.thumbs').on('click', function() {
        var numb = $(this).index(),
            videos = ['images/talking1.m4v', 'images/talking2.m4v', 'images/talking1.m4v', 'images/talking2.m4v', 'images/talking1.m4v', 'images/talking2.m4v'],
            myVideo = document.getElementById('myVid');

        myVideo.src = videos[numb]; 
        myVideo.load();
        myVideo.play();

    });
});

对于图像：

$(window).load(function(){
    $(function() {
        $('li', '.thumbs').click(function() {
            $('#MyT').addClass('clear');
        });
    });
});

我知道两者都不应该$(window).load(function()，因为这些是独立的。

Answer 1

你确定你的多选择器语法是你想要的吗？如果你想将它应用于所有那些元素，则必须引用逗号分隔选择器一次，否则你只是传递context。在任何情况下，我通常会发现上下文不必要，除非它是以前缓存的选择器。有关jQuery API的更多信息。

$('li, .thumbs') // All `li` and all `.thumbs`
$('.thumbs li') // All 'li` within `.thumbs`

请注意，您还使用了(window).load()和(document).ready()。当你结合使用时，选择一个或另一个。有一个轻微但重要的difference。然后你可以将这样的一切结合起来，它应该可以工作。

$(document).ready(function () {

    $('li, .thumbs').on('click', function () {

        // Add class
        $('#MyT').addClass('clear');

        // Video stuff
        var numb = $(this).index(),
            videos = [
                'images/talking1.m4v',
                'images/talking2.m4v', 
                'images/talking1.m4v', 
                'images/talking2.m4v', 
                'images/talking1.m4v', 
                'images/talking2.m4v'
            ],
            myVideo = document.getElementById('myVid');
            myVideo.src = videos[numb];

        myVideo.load();
        myVideo.play();

    });

});

Answer 2

为什么不把这两者结合起来呢？我怀疑你的一个点击事件处理程序可能会覆盖其他点击处理程序并导致它不能注册。

$(window).load(function(){
    $('li', '.thumbs').on('click', function() {
        var numb = $(this).index(),
            videos = ['images/talking1.m4v', 'images/talking2.m4v', 'images/talking1.m4v', 'images/talking2.m4v', 'images/talking1.m4v', 'images/talking2.m4v'],
            myVideo = document.getElementById('myVid');
        myVideo.src = videos[numb]; 

        myVideo.load();
        myVideo.play();

        $('#MyT').addClass('clear');
    });
});

Answer 3

如果他不起作用，请将这些功能分开并用window.onload(*function*)调用它们。

像这样：

function vP() {
   $('li', '.thumbs').on('click', function() {
      var numb = $(this).index(),
      videos = ['images/talking1.m4v', 'images/talking2.m4v', 'images/talking1.m4v', 'images/talking2.m4v', 'images/talking1.m4v', 'images/talking2.m4v'],
      myVideo = document.getElementById('myVid');
      myVideo.src = videos[numb]; 
      myVideo.load();
      myVideo.play();
   });
}
function iM() {
   $('li', '.thumbs').click(function() {
      $('#MyT').addClass('clear');
   });
}
window.onload(iM();vP();)

如何使这些功能停止干扰

3 个答案: