jQuery-具有相同类但具有不同ID的多个元素通过不同的结果使用相同的功能

Question

I am working on a music site that would like the the album covers as links to the track listings for that particular release.

My issue with having an image link would mean I would not be able to put any sort of descriptive text accompanying the image, unless it was an overlay, a tooltip or it to appear just below or somewhere around the image.

It is very possible to achieve a similar effect I am trying to achieve with PHP (the site would be running on WP), but that may be an issue with download speeds, screen sizes.

So I am wondering if such an effect can be achieved using JQuery.

Here is a basic structure of what I am looking to do.

This would be how the HTML looks for each release link:

<div class="box cover" id="uni-123">
    <a href="hover" id="page-title">This is the text</a>
</div>

<div class="box cover" id="uni-124">
    <a href="hover" id="page-title-2">This is the text</a>
</div>

Style would get the sizing correct for the imagery...

.box {width: 200px; height: 200px; border: 1px solid black;}
.box a {display: block; width: 200px; height: 200px; color: white;}

And then the JQuery would use the unique id's of each box to determine which imagery to get...

function boxImage(){
var boxId = $('.box').attr("id");
var image = $('#' + boxId + ' > a ').attr("id");
    $('#' + boxId).css({"background":"url(" + image + ".jpg)","background-size":"contain"});
}

$(document).ready(boxImage);

Obviously the trouble I am having is that the imagery only shows up on the first instance of .box, not all of them... SO is there a way for the boxImage function to take effect on all instances rather than on just the first... and if so... HOW?

Thanks in advanced, Matt

Answer 1

try this:

$(function() {
   $('.box').each(function() {
      var boxId = $(this).attr("id");
      var image = $('#' + boxId + ' > a ').attr("id");
      $('#' + boxId).css({"background":"url(" + image + ".jpg)","background-size":"contain"});
   });
});

So your problem is you are applying your function call only once when page loads. You need to loop through all .box elements to apply same effect to all.