これらの機能を妨げないようにするには

Question

私は2つの機能を持っています.1つはクリックでビデオを再生し、再生するビデオはクリックで再生し、次にDIVの不透明度を0にするはずの機能です。私はあなたが両方をアクティブにするために同じ場所をクリックするはずだから一緒に置くことを試みたが、それは動作しません。

何らかの理由で、ビデオを含むdivを（関数なしでも）置くと、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(); 

    }); 
}); 

とイメージのため：

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

このように2つを組み合わせるのはなぜですか？あなたのクリックイベントハンドラの1つが、他のクリックハンドラを無効にして登録しないことが考えられます。

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