0

I'm working on a website with some funny stuff on it and for each "thumbnail" on hover u get a small side-window with a small description and a link to the trailer.

Now I updated the website with a jquery popup and I want to show the trailer in that popup, but the problem is that I have about 40 "thumbnails" on each page.

So the question is "How can I us that popup for each of the thumbnails?" I don't want to fill each thumbnail->div with its own trailer popup.

I'll provide some code below.

Page.html ( this is what the php code generates )

<div id="thumb" class="popup">
    <img class="img" src="img.jpg">
    <a href="#" onclick="getTrailer('1') class="trailer">Show trailer</a>
</div>

<div id="thumb" class="popup">
    <img class="img" src="img.jpg">
    <a href="#" onclick="getTrailer('2') class="trailer">Show trailer</a>
</div>

<div id="thumb" class="popup">
    <img class="img" src="img.jpg">
    <a href="#" onclick="getTrailer('3') class="trailer">Show trailer</a>
</div>


<div id="popup>
 <p class="trailer></p>
</div>

js.js

function getTrailer(id){
$( "a.trailer" )
  .click(function() {
    var value = $( this ).val();
    $( "p.trailer" ).load("/get_trailer.php?id="+id);
  })
}

This is what I have so far, I dont know if this is safe to use or not, nor if this is the best way to handle it, anyways I dont know how else to do this, so pleas help.

Thanks in advance.

4

1 回答 1

0

Your getTrailer function is just adding a click handler to the the various links; you only want to do that once.

Instead, I think you want your links to look something like this:

<a href="#" rel="1" class="trailer">Show trailer</a>

And your javascript to look something like this:

$(document).ready(function()
{
     $('a.trailer').click(function()
     {
          var id = $( this ).attr('rel');
          $( "p.trailer" ).load("/get_trailer.php?id="+id);

          // this is so the href isn't followed
          return false;
     }
}

Also, you have id="thumb" on multiple elements; ids should only be used on one element -- use class instead.

于 2013-10-23T16:41:19.147 回答