Question

场合
我的客户希望他的首页上有一个图像网格，这些图像都链接到网站的不同部分。在悬停时，应该有一些带有一些文字的叠加层。所有这些都在Wordpress中，因此他可以更改图像，文本甚至添加或删除图像。

解决方案（目前为止）
我对图像网格的解决方案非常简单。在一行和每个单元格图像中添加三个单元格的表格相互添加不是一个非常敏感的解决方案，但它工作正常。

对于带有文本的叠加层，我想出了用javascript（jquery）将图像包装在容器div中的想法，并将叠加层添加到该容器div中。对于文本并保持其动态和可更改的客户端，我想我会提取title属性，客户端可以在Wordpress中添加图像时填写。

这是我到目前为止所做的：

$(function() {
    $("img[class^='imglink']").wrap('<div class="overlay-container"></div>');
    $("img[class^='imglink']").after('<div class="overlay"></div>');

    var imgTitle = $("img[class^='imglink']").attr('title');
    $('.overlay').html(imgTitle);
});

JSFiddle

问题
我打电话给所有以imglink-开头的图像。作为一个条件，客户端已经将一个以此为开头的类分配给图像，这是他能够在Wordpress中轻松完成的任务。所有这些图像都被容器div包裹着。很简单。这样，客户端还可以添加在悬停时不会覆盖的图像但我无法弄清楚如何从这些图像中提取标题属性并将其显示在相应的叠加层中在上面提到的小提琴中，您将看到两个叠加层中显示的第一个图像的title属性。

是否有人建议如何在相应的叠加层中显示正确的标题属性？

Answer 1

你大部分都是对的。在.each函数中包装您的DOM更改，您将变得更加精彩。像这样：

$(function() {

    $("img[class^='imglink']").each(function(){
        var imgTitle = $(this).attr('title');
        $(this).wrap('<div class="overlay-container"></div>');
        $(this).after('<div class="overlay">'+imgTitle+'</div>');

    });
});

演示：http://jsfiddle.net/zurrh3r6/6/

编辑：

为了澄清，您的代码中出现的问题是您覆盖了重叠内容。此行将值设置为小猫1（它只抓取第一个因为有多个）：

var imgTitle = $("img[class^='imglink']").attr('title');

然后，当您设置叠加层时，您要为此行设置所有.overlay元素的值：

$('.overlay').html(imgTitle);

Answer 2

jQuery有一个.siblings选择器，因此您可以使用一行jQuery代码轻松找到img元素的邻居。请看这里的小提琴：

http://jsfiddle.net/zurrh3r6/8/

此代码段将遍历所有叠加层，并获取img标记nex的标题：

$('.overlay').each(function(){
    var imgTitle = $(this).siblings('img').attr('title');
    $(this).html(imgTitle);
});

在重叠div上显示图像的标题元素

2 个答案:

编辑：