Question

I have created a table of user images that when clicked will launch videos. Here is the relevant part of the table:

<table>
<tbody>
    <tr>
        <td style="width: 220px;">
        <p><a rel="MP4:webvideos/Featured/Christina" href="#" class="mediamodal videoLink"><img alt="" src="/images/featured/christina.png" /></a><br />
        Overall Vision</p>
        </td> 

        <td style="width: 220px;">
        <p><a rel="MP4:webvideos/Featured/Logan" href="#" class="mediamodal videoLink"><img alt="" src="/images/featured/logan.png" /></a><br />
        Video Control</p>
        </td>
....

Now, I have to use the rel attribute for the video to work. Here is the Javascript I am currently using to get the rel attribute:

var mediaDetails = $(".videoLink").attr("rel");

This works great for a single file, but I have a table full of images that need to become clickable links that launch the videos.

How do I assign the mediaDetails variable to a specific link that is found in the rel attribute?

Answer 1

var mediaDetails;
$("a.videoLink").click(function(e){
    e.preventDefault();
    mediaDetails = $(this).attr("rel");
});