使用 jquery 将悬停标题添加到选项卡图像库

Posted 2023-03-29

【中文标题】使用 jquery 将悬停标题添加到选项卡图像库

【英文标题】：Adding hover title to tab image gallery with jquery

【发布时间】：2021-07-29 22:45:33

【问题描述】：

我已经通过W3Schools 建立了一个类似这样的画廊，但使用 jquery 而不是 javascript，如图所示 here。

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

//show alt as title on hover
var alt;
var $imgElem = $('.column img');

$imgElem.each(function()
    alt = $(this).attr('alt');
    $(this).parent().append('<h2>' + alt + '</h2>');
);

与 css 配合得很好

.column 
position:relative;

.column h2 
position:absolute;
top:0;left:0;
width:420px;
background:#EDE9D6;
font-size:38px;
line-height:90px;
padding:0 30px;
box-sizing:border-box;
opacity:0;
cursor:pointer;

.column:hover h2 
opacity:1;

现在的问题是标题在可见时没有用于更改展开图像的 onclick 功能。有人知道如何将该功能添加到 h2 标题中吗？我尝试了以下方法，但没有成功（图像始终相同）：

$(".column h2").click(function() 
        console.clear();
        var newclass = $(".column img").attr("src");
        console.log(newclass);
        var oldclass = $("#expandedImg").attr("id");
        console.log(oldclass);
        
        $(".stage").show();

        $("#expandedImg").attr('src', newclass).hide().fadeIn("slow");
        //set new source and hide element in order to be able to fade it in again

    );

这是html：

<div class="stage">
  <div id="imgtext"></div>
  <span class="closebtn">×</span>
  <img id="expandedImg" />
</div> 
<div id="column1" class="column">
  <img src="train.jpg"  title="train" />
</div>
<div id="column2" class="column">
  <img src="bike.jpg"  title="bike" />
</div>
<div id="column3" class="column">
  <img src="cake.jpg"  title="cake" />
</div>

感谢任何帮助和想法。

【参考方案1】：

所以您的代码中存在一些问题。

您不需要顶部的 Global alt var，您正在通过 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 class="stage" style="display:none">
  <div id="imgtext"></div>
  <span class="closebtn">×</span>
  <img id="expandedImg" />
</div> 

在点击事件中我改变了

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

由于您正在为 .column h2 执行点击事件，因此您要确保使用 $(this) 来识别您点击的是哪一个，然后遍历 this 的兄弟，这将是“img”

接下来我修改了这一行

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

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

所有这些都是变化

<style>

.column 
position:relative;


.column h2 
position:absolute;
top:0;left:0;
width:420px;
background:#EDE9D6;
font-size:38px;
line-height:90px;
padding:0 30px;
box-sizing:border-box;
opacity:0;
cursor:pointer;



.column:hover h2 
opacity:1;


</style>

<div class="stage" style="display:none">
  <div id="imgtext"></div>
  <span class="closebtn">×</span>
  <img id="expandedImg" />
</div> 
<div id="column1" class="column">
  <img src="https://via.placeholder.com/350x300"  title="train" />
</div>
<div id="column2" class="column">
  <img src="https://via.placeholder.com/350x200"  title="bike" />
</div>
<div id="column3" class="column">
  <img src="https://via.placeholder.com/350x100"  title="cake" />
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script>

//show alt as title on hover


$('.column img').each(function()
    alt = $(this).attr('alt');
    $(this).parent().append('<h2>' + alt + '</h2>');
);



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

        console.clear();
        
        var newclass = $(this).siblings("img").attr("src");
        console.log(newclass);
        
        //var oldclass = $("#expandedImg").attr("id");
        //console.log(oldclass);
        
        $(".stage").show();

        $("#expandedImg").hide().attr('src', newclass).fadeIn(5000);
        //set new source and hide element in order to be able to fade it in again

);

</script>

我使用了 HTML 占位符图片

https://via.placeholder.com/350x300
https://via.placeholder.com/350x200
https://via.placeholder.com/350x100

为了演示和轻松查看图像正在更改来源

【讨论】：

非常感谢，这正是我想要的，这些解释也帮助我理解了它是如何完成的。我确实将淡入淡出改回“慢”，因为否则它会与 img click 事件的值混淆/加倍。现在一切都按预期工作。太好了！

【参考方案2】：

var alt;
var $imgElem = $('.column img');

$imgElem.each(function()
    alt = $(this).attr('alt');
    $(this).parent().append('<h2>' + alt + '</h2>');
);

$(".column h2").on("click", function() alert('Hello') );

.column 
  position: relative;


.column h2 
  position: absolute;
  top: 0;
  left: 0;
  width: 420px;
  background: #EDE9D6;
  font-size: 38px;
  line-height: 90px;
  padding: 0 30px;
  box-sizing: border-box;
  opacity: 0;
  cursor: pointer;


.column:hover h2 
  opacity: 1;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stage">
  <div id="imgtext"></div>
  <span class="closebtn">×</span>
  <img id="expandedImg" />
</div>
<div id="column1" class="column">
  <img src="https://via.placeholder.com/150"  title="train" />
</div>
<div id="column2" class="column">
  <img src="https://via.placeholder.com/150g"  title="bike" />
</div>
<div id="column3" class="column">
  <img src="https://via.placeholder.com/150"  title="cake" />
</div>

现在你在 h2 上有一个点击事件。 你到底想要什么？ 或许你可以解释的更详细一点。

【讨论】：

感谢您的努力，以下答案正是我想要的。