Question

I have two functions, one plays a video on click (and changes the video that plays) on click, and then a function that is supposed to make a DIV’s opacity go to zero. I tried to put them together because you’re supposed to click on the same spot to activate both, but it doesn’t work.

For some reason, when I put the div that contains the video (even without its function), the second function stops working. What can I do to make then work?

The function for the video player is:

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

    });
});

And for the image:

$(window).load(function(){
    $(function() {
        $('li', '.thumbs').click(function() {
            $('#MyT').addClass('clear');
        });
    });
});

I know that both shouldn’t have $(window).load(function(), that just because these are the separate ones.

Answer 1

Are you sure your multiple selector syntax is what you want?, the comma separated selectors must be quoted just once if you want to apply it to all those element otherwise the you’re just passing a context. In any case, I usually find the context unnecesary unless it’s a previously cached selector. More info at the jQuery API.

$('li, .thumbs') // All `li` and all `.thumbs`
$('.thumbs li') // All 'li` within `.thumbs`

Notice that you’re also using (window).load() and (document).ready(). When you combine both choose one or the other. There’s a slight but important difference. Then you can combine everything like this and it should work.

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

    });

});