Javascript 如何使这些功能停止干扰

我有两个函数，一个是单击播放视频（并更改播放的视频），另一个是使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（）

，这仅仅是因为它们是独立的。

为什么不这样将两者结合在一起呢？我怀疑您的一个单击事件处理程序可能覆盖了另一个单击处理程序，导致它无法注册

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

---

为什么不这样将两者结合起来呢？我怀疑您的一个单击事件处理程序可能会覆盖另一个单击处理程序，并导致它无法注册

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

---

你确定你的多重选择器语法是你想要的吗？如果你想将逗号分隔的选择器应用于所有这些元素，则必须只引用一次逗号分隔的选择器，否则你只是在传递一个

上下文

。在任何情况下，我通常会发现上下文不必要，除非它是以前缓存的选择器。有关详细信息，请参阅

请注意，您还使用了

（window.load（）

和

（document.ready（）

。将两者结合使用时，请选择其中一个。有一点很重要。然后您可以像这样组合所有内容，这样应该可以工作

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

    });

});

---

你确定你的多重选择器语法是你想要的吗？如果你想将逗号分隔的选择器应用于所有这些元素，则必须只引用一次逗号分隔的选择器，否则你只是在传递一个

上下文

。在任何情况下，我通常会发现上下文不必要，除非它是以前缓存的选择器。有关详细信息，请参阅

请注意，您还使用了

（window.load（）

和

（document.ready（）

。将两者结合使用时，请选择其中一个。有一点很重要。然后您可以像这样组合所有内容，这样应该可以工作

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

    });

});

---

如果his不起作用，请分离函数并使用

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

---

如果his不起作用，请分离函数并使用

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

---

---

“clickable”元素是否动态添加到DOM中？不确定这是否重要，但代码中存在键入错误。

var numb=$（this）.index（），

后面应该跟一个分号，而不是逗号。@RepWhoringPeeHaa嗯，它们被添加到一个单独的div中，并且是一个列表。不。@jmort253-当它后面跟另一个变量时，就不是了，在这个例子中是一个数组。@adeneo-明白了。本地作用域vs全局作用域。我的错误！谢谢你指出这一点。“可点击”元素是动态添加的吗到DOM？不确定这是否重要，但代码中有一个输入错误。

var numb=$（this.index（）），

后面应该跟一个分号，而不是逗号。@RepWhoringPeeHaa嗯，它们被添加到一个单独的div中，并且是一个列表。不。@jmort253-当它后面跟另一个变量时，就不是了，在这个例子中是一个数组。@adeneo-明白了。局部作用域vs全局作用域。我的错误！谢谢你指出。不起作用。出于某种原因，

不起作用ag禁用了第二个。我意识到，甚至连函数都没有。我很少看到

$（窗口）.load

已使用，这表明可能您在页面加载时采取了错误的方法…不起作用。由于某种原因，

标记禁用了第二个方法。我意识到，即使是函数也不起作用。我很少看到

$（窗口）.load

已使用，这表明您可能在pageload时采取了错误的方法…我希望+1，但我今天没有投票权。这是一个非常干净的解决方案。选择器没有错，它在元素中使用class

.thumbs

查找

li

元素，并且它是一个有效的选择器。您刚刚将其更改为in包括所有的

li

元素和类

拇指的所有元素，谁知道呢。哦，是的，你是对的！我对
上下文一无所知。我不知道他是不是想这么做。哦？我也不知道，但我会假设Nata2ha是个女孩的名字，除非证明不是这样：-）…@Adeno Haah，你是对的，我是一个女孩。我试着让它，所以我点击一个拇指，然后阵列中相应的视频播放。这是有效的。所以这很好：）我想+1这个，但是我今天的票数没有了。这是一个非常干净的解决方案。选择器没有错，它使用class
.thumbs
在元素中查找
li
元素，并且它是一个有效的选择器。您刚刚将其更改为包含所有
li
元素和类
thumbs
的所有元素，这也可以工作，谁知道呢。哦，是的，您是对的！我忘记了
上下文
。不知道他是不是想这么做。OP？我也是，但我会假设娜塔莎是一个女孩的名字，除非证明不是这样：-）…@adeneo-haah，你说得对，我是女孩。我试着让它，所以我点击一个拇指，然后阵列中相应的视频播放。这是有效的。所以这很好：）