2012-05-06 28 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();)