Question

I guess I have just hit a mental block with this one; maybe some fresh eyes will help.

Basically I have a few instance of the class “menu-item” which when clicked call the click function via jQuery and bring up a video. Instead of giving each on an id as well as a class I am trying to find which instance of the class was clicked (1, 2, 3, etc).
Just can’t seem to get it though.

//click listener for menu-items
 $('.menu-item').click(function(event)
 {
      var o = $('.menu-item');
      var count = o.length();                    

     switch(count)
     {
      case 0 :
       filename == 'letters';
      break;
      case 1 :
       filename == 'the-gift';
      break;
     }

  var videoPlayer = '<video controls  width="618px">';
  videoPlayer += '<source src="_video/' + filename + '.mp4" />';
  videoPlayer += '</video>';

  //place video   
  $('#videoCont').html(videoPlayer);
 });

I’m trying to create an array there where each instance of the ‘menu-item’ is one array item.
(btw, for now I am just proofing this with an mp4 filetype before I add in the ogv and webm formats).

Thanks for any and all help!

Answer 1

In addition to @p.campbell’s solution. I’m not sure how your code is going to work.

var o = $('.menu-item')

will always return the same amount of items, namely the number of items with menu-item as the class. Why not set an attribute like filename to whatever the appropriate value is. Like so

<li class='menu-item' filename='letters'>Letters</li>

and then in your click handler you can do

var filename = $(this).attr('filename');