使用 jquery 将悬停标题添加到选项卡图片库 [英] Adding hover title to tab image gallery with jquery

问题描述

我已经通过 W3Schools 建立了一个这样的画廊，但使用 jqueryjavascript，如此处所示.

我在修改时遇到问题，也许有人可以提供帮助:我使用以下代码将使用图像 alt 标签的鼠标悬停标题添加到缩略图:

//在悬停时将 alt 显示为标题var alt;var $imgElem = $('.column img');$imgElem.each(function(){alt = $(this).attr('alt');$(this).parent().append('
' + alt + '
');});

与 css 配合得很好

.column {位置:相对；}.列 h2 {位置:绝对；顶部:0；左侧:0；宽度:420px；背景:#EDE9D6;字体大小:38px；行高:90px；填充:0 30px;box-sizing:border-box;不透明度:0;游标:指针；}.column:悬停 h2 {不透明度:1；}

现在的问题是标题在可见时没有用于更改扩展图像的 onclick 功能.有人知道如何将该功能添加到 h2 标题吗?我尝试了以下方法，但没有用(图像始终相同):

$(".column h2").click(function() {控制台清除()；var newclass = $(".column img").attr("src");控制台日志(新类)；var oldclass = $("#expandedImg").attr("id");控制台日志(旧类)；$(.stage").show();$("#expandedImg").attr('src', newclass).hide().fadeIn("slow");//设置新的源并隐藏元素以便能够再次淡入});

这是html:

<div id="imgtext"></div><span class="closebtn">×</span><img id="expandedImg";/>
<div id="column1";类=列"><img src="train.jpg";alt=火车"标题=火车"/>

<div id="column2";类=列"><img src="bike.jpg";alt=自行车"标题=自行车"/>

<div id="column3";类=列"><img src="cake.jpg";alt=蛋糕"标题=蛋糕"/>

感谢您的帮助和想法.

解决方案

因此您的代码中存在一些问题.

您不需要全局 alt 变量，您正在通过 jquery 使用 h2 标签创建动态元素.

所以在那种情况下你也想使用

$(document).on('click','.column h2',function(){});

代替

$(".column h2").click(function() {});

为了防止动态创建的元素出现事件冒泡，特别是如果你想在不同的 js 文件中加载点击事件.

还有

//var oldclass = $("#expandedImg").attr("id");//console.log(oldclass);

除了控制台记录 id 属性外不做任何事情，它不提供任何功能.

在 HTML 中，我添加了一个样式属性 display:none，因为您正在尝试显示它，然后在之后淡入.

<div id="imgtext"></div><span class="closebtn">×</span><img id="expandedImg";/>

在点击事件中我改变了

var newclass = $(this).siblings("img").attr("src");

由于您正在为 .column h2 执行点击事件，因此您需要确保使用 $(this) 来确定您点击的是哪一个，然后遍历到它的兄弟节点，即img"

接下来我修改了这一行

$("#expandedImg").hide().attr('src', newclass).fadeIn(5000);

您想首先按照您的要求隐藏 img id，然后将 source 属性设置为 newclass var，它再次在单击事件时获取 $(this) 的兄弟.然后你淡入我把它设置为 5000 但你可以把它改回慢"

所有这些都是变化