javascript - 使用 Jquery 从 div 中获取 url

Question

我正在尝试创建自己的灯箱画廊，我觉得我快成功了。

我的图库目前是一个网格设置，其中网格中每个单元格的预览都是一个 img，其中 img url 通过 CSS 放置。现在，除非我可以提取 css 代码中使用的 url，否则我将在 html 代码中放置一个 anchor 标记。然后，我使用 this 尝试从 html 标记中提取 url，并将其放置在灯箱的 img src 中。

单击单元格并显示灯箱的代码有效，但无法将标记中的 html 插入到灯箱中。

这很难解释，所以希望下面的代码能给你一个想法。

$(document).ready(function($) {

	$('.image-item').click(function(e) {
		e.preventDefault();

		var image_href = $(this).attr("href");
	
		$("#lightbox").css("display", "block");
		$('#content').html('<img src="' + image_href + '" />');
		
	});

	$('body').on('click', '#lightbox', function() {
		$("#lightbox").css("display", "none");
	});

});

#gallery {
	height: 1200px;
	position: relative;
	width: 90%;
	margin-left: 5%;
	padding-top: 75px;
}

.image-item {
	display: flex; 
	justify-content: center;
	align-items: center;
	font-family: Thasadith;
	font-weight: 400;
	font-size: 18px;
	letter-spacing: 3px;
	color: #fff;
	text-transform: uppercase;
	background-color: steelblue;
}

#images-gallery {
	display: grid;
	height: 1150px;
	grid-template-rows: repeat(4, 1fr);
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20px;
	width: 100%;
}

.image-item.one {
	grid-row: span 2;
	grid-column: span 2;
}

.image-item.two {
	grid-row: span 3;
	grid-column: span 3;
}

.image-item.three {
	grid-row: span 3;
	grid-column: span 2;
}

.image-item.four {
	grid-row: span 3;
	grid-column: span 1;
}

#lightbox {
    position:fixed;
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background-color: black;
    opacity: 0.5;
    text-align: center;
    z-index: 2;
    display: none;
}

#lightbox p {
    text-align:right; 
    color:#fff; 
    margin-right:20px; 
    font-size:12px; 
}

#lightbox img {
    box-shadow:0 0 25px #111;
    -webkit-box-shadow:0 0 25px #111;
    -moz-box-shadow:0 0 25px #111;
    max-width:940px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="gallery">
		<div id = "images-gallery">
            <div id="image-one" class="image-item">
            	<a href="https://i.ibb.co/HXfG735/tattoo.jpg"></a>
            </div>
            <div id="image-two" class="image-item">
            	<a href=""></a>
            </div>
            <div id="image-three" class="image-item" >
            	<a href=""></a>
            </div>
            <div id="image-four" class="image-item" >
            	<a href=""></a>
            </div>
            <div id="image-five" class="image-item" >
            	<a href=""></a>
            </div>
            <div id="image-six" class="image-item" >
            	<a href=""></a>
            </div>
            <div id="image-seven" class="image-item" >
            	<a href=""></a>
            </div>
            <div id="image-eight" class="image-item" >
            	<a href=""></a>
            </div>
            <div id="image-nine" class="image-item" >
            	<a href=""></a>
            </div>
            <div id="image-ten" class="image-item" >
            	<a href=""></a>
            </div>
            <div id="image-eleven" class="image-item" >
            	<a href=""></a>
            </div>
            <div id="image-twelve" class="image-item" >
            	<a href=""></a>
            </div>
        </div>
	</div>

    <div id="lightbox">
 	   <p>Click to close</p>
       <div id="content">
           <img src="#" />
       </div>
   </div>

Answer 1

您正在尝试检索 img 标签 的 href 值。

var image_href = $(this).attr("href");

应该是……

var image_href = $(this).children('a').attr("href");

$(document).ready(function($) {

	$('.image-item').click(function(e) {
		e.preventDefault();

		var image_href = $(this).children('a').attr("href");
	
		$("#lightbox").css("display", "block");
		$('#content').html('<img src="' + image_href + '" />');
		
	});

	$('body').on('click', '#lightbox', function() {
		$("#lightbox").css("display", "none");
	});

});

#gallery {
	height: 1200px;
	position: relative;
	width: 90%;
	margin-left: 5%;
	padding-top: 75px;
}

.image-item {
	display: flex; 
	justify-content: center;
	align-items: center;
	font-family: Thasadith;
	font-weight: 400;
	font-size: 18px;
	letter-spacing: 3px;
	color: #fff;
	text-transform: uppercase;
	background-color: steelblue;
}

#images-gallery {
	display: grid;
	height: 1150px;
	grid-template-rows: repeat(4, 1fr);
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20px;
	width: 100%;
}

.image-item.one {
	grid-row: span 2;
	grid-column: span 2;
}

.image-item.two {
	grid-row: span 3;
	grid-column: span 3;
}

.image-item.three {
	grid-row: span 3;
	grid-column: span 2;
}

.image-item.four {
	grid-row: span 3;
	grid-column: span 1;
}

#lightbox {
    position:fixed;
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background-color: black;
    opacity: 0.5;
    text-align: center;
    z-index: 2;
    display: none;
}

#lightbox p {
    text-align:right; 
    color:#fff; 
    margin-right:20px; 
    font-size:12px; 
}

#lightbox img {
    box-shadow:0 0 25px #111;
    -webkit-box-shadow:0 0 25px #111;
    -moz-box-shadow:0 0 25px #111;
    max-width:940px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="gallery">
		<div id = "images-gallery">
            <div id="image-one" class="image-item">
            	<a href="https://i.ibb.co/HXfG735/tattoo.jpg"></a>
            </div>
            <div id="image-two" class="image-item">
            	<a href=""></a>
            </div>
            <div id="image-three" class="image-item" >
            	<a href=""></a>
            </div>
            <div id="image-four" class="image-item" >
            	<a href=""></a>
            </div>
            <div id="image-five" class="image-item" >
            	<a href=""></a>
            </div>
            <div id="image-six" class="image-item" >
            	<a href=""></a>
            </div>
            <div id="image-seven" class="image-item" >
            	<a href=""></a>
            </div>
            <div id="image-eight" class="image-item" >
            	<a href=""></a>
            </div>
            <div id="image-nine" class="image-item" >
            	<a href=""></a>
            </div>
            <div id="image-ten" class="image-item" >
            	<a href=""></a>
            </div>
            <div id="image-eleven" class="image-item" >
            	<a href=""></a>
            </div>
            <div id="image-twelve" class="image-item" >
            	<a href=""></a>
            </div>
        </div>
	</div>

    <div id="lightbox">
 	   <p>Click to close</p>
       <div id="content">
           <img src="#" />
       </div>
   </div>

顺便说一下，您可能希望将 url 设置为 data 值，而不是使用空链接。它会缩短 DOM。