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

Question

我已经通过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" 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

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

您不需要顶部的 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" 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

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

Answer 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" 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 上有一个点击事件。 你到底想要什么？ 或许你可以解释的更详细一点。