Question

I have a video array, and then a list of thumbs that correspond to the array. When you click on one of the buttons, it needs to be deactivated for the duration of the video. I have it so that after the first click, it deactivates the whole list

$('li', '.thumbs').on('touchend click', function() {
    $("#myVid").on("loadeddata", function() {
        $("#bigPic").addClass("move");
        $("#MyT").fadeOut(750);
    });
    playVideo2( $(this).index() );
    $('li', '.thumbs').unbind();
});

if each item in the list is set up like this:

<li rel='1' id="first">
    <div style="top:0px;">
        <img src="graphics/filler.png" alt="" width="280" height="128" />
    </div>
</li>

with the id being different for each, can I just put the id instead of the .thumbs, and just have it unbind or turn off itself? I know this must be inefficient, but I’m not sure how else to do it. Do I use this() somehow? If so, how?

Answer 1

You could make use of a global variable to check which video is playing.

//init
var currentlyPlaying = undefined;

Within your event handling part you set this variable to the ID of the clicked button.

currentlyPlaying = $(this).attr('id');

With that setup you can check the variable before doing anything in your script.

if ( !(currentlyPlaying == $(this).attr('id')) ) {
  // your script
}

Alternatively, you can use the ID to unbind as you suggested, of course.

$('li', '.thumbs #' + $(this).attr('id')).unbind();