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

Question

我已经通过 W3Schools but with jquery instead of javascript as shown 建立了一个像这样的画廊。

我在修改时遇到问题，也许有人可以提供帮助：我使用以下代码将使用图像 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" alt="train" title="train" />
</div>
<div id="column2" class="column">
  <img src="bike.jpg" alt="bike" title="bike" />
</div>
<div id="column3" class="column">
  <img src="cake.jpg" alt="cake" title="cake" />
</div>

感谢您的帮助和想法。

Answer 1

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" alt="train" title="train" />
</div>
<div id="column2" class="column">
  <img src="https://via.placeholder.com/150g" alt="bike" title="bike" />
</div>
<div id="column3" class="column">
  <img src="https://via.placeholder.com/150" alt="cake" title="cake" />
</div>

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

Answer 2

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

您不需要顶部的全局 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) 来识别您点击的是哪一个，然后遍历到该列的兄弟项，即“img”

接下来我修改了这一行

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

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

所有这些都是变化

<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" alt="train" title="train" />
</div>
<div id="column2" class="column">
  <img src="https://via.placeholder.com/350x200" alt="bike" title="bike" />
</div>
<div id="column3" class="column">
  <img src="https://via.placeholder.com/350x100" alt="cake" 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

演示并轻松查看图像正在更改来源

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

Adding hover title to tab image gallery with jquery

jquery

tabs

thumbnails

image-gallery