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函数在所有实例上生效而不是仅仅第一个...如果是的话...怎么样？

先谢谢了，Matt

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

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

1 个答案: