javascript - 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 将使用每个框的唯一 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 函数对所有实例生效，而不是只对第一个……如果是……怎么做？

提前致谢，马特

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