我正在开展一个学校项目，我需要创建一个灯箱。以下设置为显示带有href标记内容的警报。我试图制作一个带有href属性的脚本并将其放入src标签中的lightbox-img div中，但每次它都会显示为未定义或只是链接到另一个页面。如果还有其他需要的信息，请告诉我我真的想知道哪里出错了。多谢你们！ （我正在测试的那个是可编辑文本项目的第二个td）
HTML
<div id="gallerySection" >
<table align="center" class="thumbs">
<tr>
<td>
<a href="">
<img src="image/galleryThumbnails/Kohli_characterRecreation1.jpg" width="200px" height="200px" alt="">
</a>
</td>
<td>
<a href="image/gallery/kohli_editableText3.jpg">
<img src="image/galleryThumbnails/Kohli_editableText3.jpg" width="200px" height="200px" alt="">
</a>
</td>
<td>
<a href="">
<img src="image/galleryThumbnails/Kohli_frankSinatra.jpg" width="200px" height="200px" alt="">
</a>
</td>
<td>
<a href="">
<img src="image/galleryThumbnails/postcard.png" width="200px" height="200px" alt="">
</a>
</td>
</tr>
<tr>
<td>
<a href="">
<img src="image/galleryThumbnails/Kohli_splatter.jpg" width="200px" height="200px" alt="">
</a>
</td>
<td>
<a href="">
<img src="image/galleryThumbnails/Kohli_valentinesDayCard2.jpg" width="200px" height="200px" alt="">
</a>
</td>
<td>
<a href="">
<img src="image/galleryThumbnails/Kohli_valentinesDayCard.jpg" width="200px" height="200px" alt="">
</a>
</td>
<td>
<a href="">
<img src="image/galleryThumbnails/postcard.png" width="200px" height="200px" alt="">
</a>
</td>
</tr>
</table>
<div class="lightbox" data-state="hidden">
<div class="lightbox-container">
<div class="lightbox-content">
<img class="lightbox-img" alt="">
</div>
</div>
</div>
CSS
table{
margin: 0 auto;
margin-top: .5%;
width: 60%;
}
td{
padding: 2%;
}
td img:hover{
transform: rotate(4deg) ;
background-color: white;
opacity: .7;
}
td img{
border: 1px solid #770BE0;
}
.lightbox {
position:fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
display: none;
}
.lightbox-container{
position: absolute;
z-index: 10;
left: 15%;
right: 15%;
bottom: 15%;
top: 15%;
background-color: #FFFFFF;
border-radius: 6px;
box-shadow: 1px 1 px 4px #000;
}
.lightbox-content{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
}
.lightbox-img{
display: block;
width: 100%;
}
.lightbox[data-state="visible"] {
display: block;
}
Jquery的
<script>
$(document).ready(function(){
var $thumbs = $('.thumbs');
var $lbImg = $('.lightbox-img');
var $lb = $('.lightbox');
$(".thumbs td").click(function(event) {
event.preventDefault();
event.stopPropagation();
alert($(this).filter("[href]").attr('href'));
$lbImg.attr("src",content);
$lb.attr('data-state', 'visible');
});
});
</script>
答案 0 :(得分：1)
您希望使用$.find()而不是$.filter()，并且需要使用您将在其中使用的完整图像源填充链接的href属性。收藏夹。
$(document).ready(function() {
var $thumbs = $('.thumbs');
var $lbImg = $('.lightbox-img');
var $lb = $('.lightbox');
$(".thumbs td").click(function(event) {
event.preventDefault();
event.stopPropagation();
var content = $(this).find("[href]").attr('href');
$lbImg.attr("src", content);
$lb.attr('data-state', 'visible');
});
});table {
margin: 0 auto;
margin-top: .5%;
width: 60%;
}
td {
padding: 2%;
}
td img:hover {
transform: rotate(4deg);
background-color: white;
opacity: .7;
}
td img {
border: 1px solid #770BE0;
}
.lightbox {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: none;
}
.lightbox-container {
position: absolute;
z-index: 10;
left: 15%;
right: 15%;
bottom: 15%;
top: 15%;
background-color: #FFFFFF;
border-radius: 6px;
box-shadow: 1px 1 px 4px #000;
}
.lightbox-content {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
}
.lightbox-img {
display: block;
width: 100%;
}
.lightbox[data-state="visible"] {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallerySection">
<table align="center" class="thumbs">
<tr>
<td>
<a href="http://kenwheeler.github.io/slick/img/fonz1.png">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" width="200px" height="200px" alt="">
</a>
</td>
<td>
<a href="http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg">
<img src="http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg" width="200px" height="200px" alt="">
</a>
</td>
<td>
<a href="">
<img src="image/galleryThumbnails/Kohli_frankSinatra.jpg" width="200px" height="200px" alt="">
</a>
</td>
<td>
<a href="">
<img src="image/galleryThumbnails/postcard.png" width="200px" height="200px" alt="">
</a>
</td>
</tr>
<tr>
<td>
<a href="">
<img src="image/galleryThumbnails/Kohli_splatter.jpg" width="200px" height="200px" alt="">
</a>
</td>
<td>
<a href="">
<img src="image/galleryThumbnails/Kohli_valentinesDayCard2.jpg" width="200px" height="200px" alt="">
</a>
</td>
<td>
<a href="">
<img src="image/galleryThumbnails/Kohli_valentinesDayCard.jpg" width="200px" height="200px" alt="">
</a>
</td>
<td>
<a href="">
<img src="image/galleryThumbnails/postcard.png" width="200px" height="200px" alt="">
</a>
</td>
</tr>
</table>
<div class="lightbox" data-state="hidden">
<div class="lightbox-container">
<div class="lightbox-content">
<img class="lightbox-img" alt="">
</div>
</div>
</div>