2012-05-06 26 views
1

我有两个功能,一个是点击播放视频(并更改播放的视频),然后是一个应该使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(),只是因为这些是独立的。

+0

动态添加到DOM中的 '点击' 元素? – PeeHaa

+0

不确定这是否重要,但代码中存在拼写错误。 'var numb = $(this).index(),'后面应该跟一个分号而不是逗号。 – jmort253

+0

@RepWhoringPeeHaa恩,他们被添加在一个单独的div,并且是一个列表。编号 –

回答

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

    }); 

}); 
+1

我会+1这个,但是我今天没票了。这是一个更清洁的解决方案。 – jmort253

+0

选择器没有错,它找到类'.thumbs'中元素的'li'元素,它是一个有效的选择器。你只是改变它来包含所有'li'元素和所有具有'thumbs'类的元素,这些也可以工作,谁知道呢。 – adeneo

+0

哦,是的,你是对的!我对“上下文”有所了解。不知道这是他想要做什么。 OP? – elclanrs

0

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

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

不起作用。出于某种原因,一个'

+0

尝试elclanrs答案。我很少看到'$(window).load'被使用,这表明你可能在页面加载时采取了错误的做法... – jmort253

0

如果他不工作,分开功能,并与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();)