使用jQuery从div中获取网址

Question

我正在尝试创建自己的灯箱画廊，感觉就快到了。

我的画廊当前是一个网格设置，其中网格中每个单元格的预览将为img，其中img网址是通过CSS放置的。现在，除非我可以拉出CSS代码中使用的url，否则我将在HTML代码中放置一个定位标记。然后，我使用this尝试从html标记中拉出网址，并将其放在灯箱的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>

顺便说一句，您可能希望将网址设置为data值，而不要使用空链接。这样会缩短DOM。