Как заставить эти функции перестать мешать

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