Javascript Jquery-具有相同类但不同ID的多个元素使用相同的函数，但结果不同

我在一个音乐网站上工作，希望专辑封面能够链接到特定发行版的曲目列表

我的问题是有一个图像链接，这意味着我将无法将任何类型的描述性文本伴随图像，除非它是一个覆盖，一个工具提示或它出现在图像的正下方或周围

这是非常有可能实现类似的效果，我正试图实现与PHP（该网站将运行在可湿性粉剂），但这可能是一个问题，下载速度，屏幕大小

所以我想知道使用JQuery是否可以实现这种效果

这是我想做的事情的基本结构

这就是HTML对每个发布链接的外观：

<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>

然后JQuery将使用每个框的唯一id来确定要获取的图像

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);

显然，我遇到的问题是，这些图像只出现在.box的第一个实例中，而不是全部。。。那么有没有一种方法可以让boxImage函数在所有实例上生效，而不仅仅是在第一个实例上。。。如果是的话。。。怎么做

感谢高级版，Matt

试试这个：

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

---

所以，您的问题是在页面加载时只应用了一次函数调用。您需要遍历所有

.box

元素，才能对所有元素应用相同的效果。

我认为您正在寻找它的简单性，因为您知道如何操作；）击掌！

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