Question

请看这个小提琴http://jsfiddle.net/rabelais/fEaAZ/4/

如何使用图像的alt标签将小缩略图图像链接到较大的隐藏图像？

我希望在悬停较小缩略图时显示匹配的隐藏图像。

 $(".thumbnails").on("mouseover mouseout", "img", function () {
var flag = $(this).data('flag');

$('[alt="' + $(this).attr('alt') + '"]').css('visibility', flag ? 'hidden' : 'visible');

$(this).data('flag', !flag);
});

Answer 1

如果我理解正确，那么你最大的问题是，当需要显示其他图片时，以前显示的图像不会被隐藏。

当您将鼠标悬停在使用alt设置为＆＃39; alicecurls＆＃39;的缩略图上时，您正在更改缩略图和大图片的可见性，但只会更改包含该精确alt的那些。这意味着之前可见的图片保持可见。

您可能想要浏览所有大图片并隐藏那些没有正确的属性alt值的图片。

我会以下列方式更改您的代码：

$(".thumbnails").on("mouseover mouseout", 'img', function () {
    var alt = $(this).attr('alt');
    $('.displayed-image > img').each(function(index, element) {
        var el = $(element),
            visibility = el.attr('alt') === alt ? 'visible' : 'hidden';
        el.css('visibility', visibility);
    });
});

以下是改变代码的小提琴：http://jsfiddle.net/mj7ba/。

但是，您需要定义用户将鼠标移离图片后应显示哪张图片。

Answer 2

我建议进行以下更改：

不滥用alt属性并为此目的使用data- *
在选择器中使用id
使用显示图片作为占位符，因为原始图片已包含正确的网址

以下是代码：fiddle

使用Javascript：

$(".thumbnails").on("mouseover ", "img", function () {   
    $('#' + $(this).attr('data-large'))
     .attr('src', $(this).attr('src'))
     .css('visibility', 'visible');
 });

$(".thumbnails").on("mouseout ", "img", function () {   
   $('#' + $(this).attr('data-large')).css('visibility', 'hidden');
 });

HTML：

<div class="thumbnails">
<img src="http://intelligen.info/images/Personal/instagram Randoms/alicecurls.jpg"  data-large="alicecurls"/>
<img src="http://intelligen.info/images/Personal/instagram Randoms/genna.jpg" data-large="genna"/>
</div>

<div class="displayed-image">
   <img id="alicecurls" class="repeatable" />
   <img id="genna" class="repeatable"  />
</div>

将鼠标悬停在图片上以显示由alt标记链接的较大隐藏图片？

2 个答案: