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

Question

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

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

这是非常有可能达到一个类似的效果，我试图用PHP (该网站将运行在WP)，但这可能是一个问题，下载速度，屏幕大小。

因此，我想知道是否可以使用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>

样式会使图像的尺寸正确.

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

然后JQuery会使用每个盒子的唯一标识来确定要得到的图像.

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函数在所有实例上生效，而不仅仅是在第一个实例上。如果是这样..。多么?

谢谢你，马特

Answer 1

试试这个：

$(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元素，以便对所有元素应用相同的效果。