我正在try 构建一个图像库,按下相关按钮将显示(并写入)到隐藏的div中.使用jquery,我可以让它显示/隐藏div,甚至加载指定的图像.但当我试图把所有东西都放在一个外部文件中(以尽量减少代码重复)时,我什么也得不到.
主html文件:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/full.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="img-container" style="display: none;">
</div>
<button id="view-more">Show</button>
<script type="text/javascript">
var imgWrite = $('<img src="img/photos/image0000-0.png" />');
$("#view-more").click(function(){
$("#img-container").css('display', 'flex');
$('#img-container').load("galleries/gallery01.txt"
});
$("#close").click(function(){
$("#img-container").css('display', 'none');
});
</script>
</body>
</html>
编辑帖子:
<button id="close">Close</button>
<img src="img/photos/image0000-0.png" />
<div id="info">
<h4>Title</h4>
<h5>Artist</h5>
<h5>Medium</h5>
<h6>Notes</h6>
</div>
编辑:我修复了缺少的关闭参数、按钮和加载的背景样式,但仍然没有图像或标题.