这个问题与我上周提出的问题非常相似，但是，使用我得到的答案现在似乎对我不起作用。我正在尝试检索与某个弹出式 div 关联的图像。到目前为止，如果我将带有关联文本的图像放在隐藏类中，我就可以提取图像。但是，这需要我将图像放置在页面上两次。我只想放置一次。我知道这很令人困惑，但基本上，我想从父节点中提取图像并将其放入弹出式 div 中。到目前为止，这是我所拥有的。
HTML
<!DOCTYPE html>
<html>
<head>
<title>.</title>
<link rel="stylesheet" href="styles/desktop.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="includes/init.js"></script>
<script type="text/javascript" src="includes/jquery.nicescroll.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<nav>
<ul>
<li><a href="index.html">Home / About Me</a></li>
<li><a href="work.html">Work Experience</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
</header>
<div id="content">
<div class="example">
<img src="images/army.jpg" />
<div class="description">
<img src="images/army.jpg" />
<p>I began my Active Duty career in July of 2002, 3 months after graduating high school. I had always wanted to join the military as a child and made my final decision after the September 11, 2001 attack on the World Trade Center. I went to 9 weeks of Basic Training in Ft. Sill Oklahoma. A week after graduating, I moved across the base to the Field Artillery Training school, where I spent 8 weeks learning to be a Fire Direction Specialist(FDC). After my training, I was sent to Ft. Lewis Washington where I continued to operate as an FDC with I Corps Field Artillery. I was quickly given the opportunity to add the Forward Observer MOS to my job title. While with my unit, I excelled in learning the Advanced Field Artillery Tactical Data Systems(AFATDS) and was given the role of senior AFATDS operator and instructor. Even though I was a lower rank than most members of my unit at that time, I was given the task of teaching my peers, as well as my superior Officers, and Non-Commissioned Officers in proceedures and operations of an AFATDS machine.</p>
</div>
</div>
<div class="example">
<img src="images/reserve.jpg" />
<div class="description">
<img src="images/reserve.jpg" />
<p>Reserves</p>
</div>
</div>
<div class="example">
<img src="images/gsu.png" />
<div class="description">
<img src="images/gsu.png" />
<p>Georgia Southern</p>
</div>
</div>
<div class="example">
<img src="images/twc.png" />
<div class="description">
<img src="images/twc.png" />
<p>The Weather Chanel</p>
</div>
</div>
<div class="example">
<img src="images/fsi.jpg" />
<div class="description">
<img src="images/fsi.jpg" />
<p>FlightSafety International</p>
</div>
</div>
<div class="example">
<img src="images/freelance.jpg" />
<div class="description">
<img src="images/freelance.jpg" />
<p>Freelance</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body{
background-color: #757575;
color: #FFFFFF;
}
header{
position: absolute;
background-color: #000000;
height: 65px;
top: -68px;
left: 0;
right: 0;
border-bottom: 3px inset #DDAA00;
font-size: 14px;
z-index: 0;
}
nav{
position: absolute;
height: 55px;
top: 5px;
left: 0;
right: 0;
bottom: 5px;
color: #DDAA00;
}
nav ul{
text-align: center;
margin-top: 13px;
font-size: 1.25em;
}
nav ul li{
display: inline;
list-style: none;
padding-right: 50px;
text-decoration: none;
}
nav ul li a{
text-decoration: none;
}
nav ul li a:link{
color: #DDAA00;
}
nav ul li a:visited{
color: #757575;
}
nav ul li ul{
position: absolute;
display: none;
left: 0;
background-color: red;
}
nav ul li ul li{
display: block;
width: 100%;
}
#wrapper{
position: absolute;
top: 68px;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
#content{
position: absolute;
float: left;
top: 75px;
left: 15%;
right: 20%;
font-size: 16pt;
z-index: 0;
}
#imageHolder{
position: relative;
float: left;
width: 150px;
height: 200px;
padding-right: 25px;
border-radius: 25px;
z-index: 0;
}
#imageBorder{
position: absolute;
float: left;
width: 150px;
height: 200px;
border-radius: 25px;
box-shadow: 0px 2px 50px 10px #757575 inset;
z-index: 1;
}
#imageHolder img{
border-radius: 25px;
width: 150px;
}
#content p{
text-align: justify;
}
.example{
position: relative;
display: inline-block;
float: left;
margin: 25px;
width: 110px;
height: 145px;
font-size: 0.5em;
z-index: 0;
}
.example img{
position: relative;
float: left;
display: block;
width: 100%;
height: 75%;
z-index: 0;
}
.example p{
position: relative;
float: left;
display: block;
cursor: pointer;
}
#popup{
position: absolute;
display: none;
top: 10%;
left: 25%;
right: 25%;
bottom: 10%;
background-color: #757575;
border-radius: 25px;
box-shadow: 15px 15px 25px #000000;
z-index: 10;
}
#mask{
position: absolute;
display: none;
top: -68px;
left: 0;
right: 0;
bottom: 0;
background-color: #FFFFFF;
opacity: 0.75;
z-index: 9;
}
.popImgHolder{
position: absolute;
top: 0;
left: 25%;
background-color: red;
width: 50%;
height: 45%;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.popImgHolder img{
width: 100%;
height: 100%;
}
.popTxtHolder{
position: absolute;
top: 45%;
left: 0;
background-color: blue;
width: 100%;
height: 55%;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
.popTxtHolder p{
font-size: 14px;
padding-left: 25px;
padding-right: 25px;
}
.description{
display: none;
}
JavaScript
$(document).ready(function(){
$('#wrapper').append('<div id="mask"></div>');
$('#wrapper').append('<div id="popup"><div class="popImgHolder"></div><div class="popTxtHolder"></div></div>');
$('.example').append('<p>Click here to read about my experience<p>');
$("html").niceScroll();
var popTxtHolder = $('.popTxtHolder');
$('.example p').on('click', function(){
var text = $(this).prev('.description').find('p').text();
var images = $(this).prev('.description').find('img').attr('src');
$('.popImgHolder').html('<img src="' +images +'" />');
$('<p>' +text +'</p>').appendTo('.popTxtHolder');
$('#popup, #mask').show();
popTxtHolder.niceScroll({cursorwidth: '2px'});
})
$('#popup, #mask').click(function(){
$('#popup, #mask').hide();
$('.popTxtHolder, .popImgHolder').children().remove();
})
})
这是我想做的事情的笔。 (注意 html 中的图像放置在“.example”的父类中，而不是“.description”的子类中。
最佳答案
如果你愿意
pull an image from a parent node and place it into a popup div
在您的代码中:
var images = $('.example').find('img').attr('src');
$('.popImgHolder').html('<img src="' +images +'" />');
你需要这样做:
var image = $(this).parents('.example').find('img:first-child');
image.appendTo('.popImgHolder');
关于javascript - 在 jQuery 弹出式 div 中显示图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23891219/