尝试使用点击事件制作图像标签库 - IT屋-程序员软件开发技术分享社区
尝试使用点击事件制作图像标签库
[英] Trying to make a image tab gallery with click event
本文介绍了尝试使用点击事件制作图像标签库的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
W3Schools 有一个示例 ，我用它来制作图像标签库.
他们使用纯 JS 的示例，我正在尝试使用 jQuery.我是使用 jQuery 的新手，但我有一个功能似乎可以在控制台中抓取图像，但所选图像不会出现在 img 元素中，ID 为 #expandedImg.
我似乎无法弄清楚出了什么问题，或者为什么它不会呈现我单击的图像.我将不胜感激任何指导.谢谢.
$(document).ready(function() {$(".column img").click(function() {var newclass = $(this).attr("src");控制台日志(新类)；var oldclass = $("#expandedImg").attr("id");控制台日志(旧类)；$("#expandedImg").fadeOut(function() {$("#expandedImg").removeClass(oldclass).addClass(newclass).fadeIn("slow");控制台日志(新类)；});});});
/* 网格:四个相等的列，彼此相邻浮动 */.柱子 {向左飘浮;宽度:20%；填充:10px；}/* 为网格内的图像设置样式 */.column img {不透明度:0.8；光标:指针；}.column img:悬停{不透明度:1；}/* 清除列后的浮动 */.行:后{内容: "";显示:表；清楚:两者；}/* 扩展图像容器 */.容器 {位置:相对；显示:无；宽度:50%；}/* 展开图像内的可关闭按钮 */.closebtn {位置:绝对；顶部:10px；右:15px；白颜色;字体大小:35px；光标:指针；}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!DOCTYPE html><html lang="zh-cn"><头><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片库</title><link rel="stylesheet" type="text/css" href="styles.css"/><link href="../jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/><script src="../jquery-ui/external/jquery/jquery.js" type="text/javascript"></script><script src="../jquery-ui/jquery-ui.min.js" type="text/javascript"></script><身体><!-- 四列--><div class="row"><div class="column"><img src="../images/trees_mountains.jpg" alt="Nature" style="width:100%"><div class="column"><img src="../images/snow_mountains.jpg" alt="Snow" style="width:100%">
<div class="column"><img src="../images/mountain_landscape.jpg" alt="Mountains" style="width:100%">
<div class="column"><img src="../images/skylights.jpg" alt="Lights" style="width:100%">
<div class="容器"><span onclick="this.parentElement.style.display='none'" class="closebtn">×</span><img id="expandedImg" style="width:100%"/>
</html>
解决方案
在 CSS 中使用 display: none 隐藏带有图像的整个容器:
.container {位置:相对；显示:无；宽度:50%；}你需要先展示一下:
$(".container").show()您还使用 removeClass 和 addClass 添加新的图像源.removeClass 和 addClass 仅用于添加和删除 CSS 类，仅用于添加和删除 CSS 类.
您存储在 newclass 和 oldclass 中的数据不是 CSS 类，它们是带有值的变量，值是 newclass，您刚刚通过名称调用了变量 newclass.
您需要以与获取它们相同的方式添加源并用变量中的值填充它:
$("#expandedImg").attr('src', newclass)
$(document).ready(function() {$(".column img").click(function() {控制台清除()；var newclass = $(this).attr("src");控制台日志(新类)；var oldclass = $("#expandedImg").attr("id");控制台日志(旧类)；$(".container").show();//显示 .container$("#expandedImg").attr('src', newclass).hide().fadeIn("slow");//设置新的源并隐藏元素以便能够再次淡入//淡入仅适用于隐藏元素});});
/* 网格:四个相等的列，彼此相邻浮动 */.柱子 {向左飘浮;宽度:20%；填充:10px；}/* 为网格内的图像设置样式 */.column img {不透明度:0.8；光标:指针；}.column img:悬停{不透明度:1；}/* 清除列后的浮动 */.行:后{内容: "";显示:表；清楚:两者；}/* 扩展图像容器 */.容器 {位置:相对；显示:无；宽度:50%；}/* 展开图像内的可关闭按钮 */.closebtn {位置:绝对；顶部:10px；右:15px；白颜色;字体大小:35px；光标:指针；}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!DOCTYPE html><html lang="zh-cn"><头><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片库</title><link rel="stylesheet" type="text/css" href="styles.css"/><link href="../jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="../jquery-ui/jquery-ui.min.js" type="text/javascript"></script><身体><!-- 四列--><div class="row"><div class="column"><img src="https://pmcvariety.files.wordpress.com/2019/12/baby-yoda-plush-toy-mattel-the-mandalorian.png?w=1000&h=563&crop=1"alt="自然" 样式="宽度:100%"><div class="column"><img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/oicrsr3wwqi6u3buvvxx.jpg" alt="Snow" style="width:100%">
<div class="column"><img src="https://images2.minutemediacdn.com/image/upload/c_crop,h_1224,w_2177,x_80,y_0/f_auto,q_auto,w_1100/v1574876645/shape/mentalfloss/6095012.jpg=disney_lt;山"样式=宽度:100%">
<div class="column"><img src="https://static1.srcdn.com/wordpress/wp-content/uploads/2019/12/Baby-Yoda-in-The-Mandalorian-Chapter-4.jpg" alt="Lights" 样式="宽度:100%">
<div class="容器"><span onclick="this.parentElement.style.display='none'" class="closebtn">×</span><img id="expandedImg" style="width:100%"/>
</html>
W3Schools has an example I am using to make an image tab gallery.
Their example in using plain JS and I'm trying to use jQuery. I am new to using jQuery but I have a function that appears to grab the image in the console but the image selected will not appear in the img element with the id of #expandedImg.
I can't seem to figure out what is wrong or why it won't render the image I click on. I would appreciate any guidance. Thanks.
$(document).ready(function() {
$(".column img").click(function() {
var newclass = $(this).attr("src");
console.log(newclass);
var oldclass = $("#expandedImg").attr("id");
console.log(oldclass);
$("#expandedImg").fadeOut(function() {
$("#expandedImg").removeClass(oldclass).addClass(newclass).fadeIn("slow");
console.log(newclass);
});
});
});
/* The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
width: 50%;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link href="../jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="../jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="../images/trees_mountains.jpg" alt="Nature" style="width:100%">
</div>
<div class="column">
<img src="../images/snow_mountains.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="../images/mountain_landscape.jpg" alt="Mountains" style="width:100%">
</div>
<div class="column">
<img src="../images/skylights.jpg" alt="Lights" style="width:100%">
</div>
</div>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%" />
</div>
</body>
</html>
解决方案
Your whole container with image inside is hidden with display: none in CSS:
.container {
position: relative;
display: none;
width: 50%;
}
You need to show it first:
$(".container").show()
Also you are using removeClass and addClass to add new image source.
removeClass and addClass are ONLY for adding and removing CSS classes, nothing else.
Data you have stored in newclass and oldclass are not CSS classes, those are variables with values and value is source of image in case of newclass, you just called variable newclass by name.
You need to add source same way you get them and fill it with value from variable:
$("#expandedImg").attr('src', newclass)
$(document).ready(function() {
$(".column img").click(function() {
console.clear();
var newclass = $(this).attr("src");
console.log(newclass);
var oldclass = $("#expandedImg").attr("id");
console.log(oldclass);
$(".container").show();
// show .container
$("#expandedImg").attr('src', newclass).hide().fadeIn("slow");
//set new source and hide element in order to be able to fade it in again
// fade in works only on hidden elements
});
});
/* The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
width: 50%;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link href="../jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="https://pmcvariety.files.wordpress.com/2019/12/baby-yoda-plush-toy-mattel-the-mandalorian.png?w=1000&h=563&crop=1" alt="Nature" style="width:100%">
</div>
<div class="column">
<img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/oicrsr3wwqi6u3buvvxx.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="https://images2.minutemediacdn.com/image/upload/c_crop,h_1224,w_2177,x_80,y_0/f_auto,q_auto,w_1100/v1574876645/shape/mentalfloss/609512-disney_0.jpg" alt="Mountains" style="width:100%">
</div>
<div class="column">
<img src="https://static1.srcdn.com/wordpress/wp-content/uploads/2019/12/Baby-Yoda-in-The-Mandalorian-Chapter-4.jpg" alt="Lights" style="width:100%">
</div>
</div>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%" />
</div>
</body>
</html>
这篇关于尝试使用点击事件制作图像标签库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
