In a function I'm working on, I need to retrieve the specific text within a p element when its parent (.photoBackground) is clicked. The purpose of this operation is to grab the caption for a gallery, where there are multiple p elements with the same class. My goal is to extract the text from the clicked element and then copy it to an empty .photoCaptionBig element. Currently, I have a click function in place for other functionalities:
$('.photoBackground').on('click',function ()Here is the HTML code snippet:
<div id="lightbox_caption_container">
<a id="lightbox"></a>
<div class="photoCaptionEffect">
<p class="photoCaptionBig" style=""></p>
</div>
</div>
<div class="itemContainer">
<div class="photoBackground" id="photo1">
<div class="photoHoverEffect">
<p class="photoCaption" style="">TextTextText</p>
</div>
</div>
</div>and here is the corresponding CSS code snippet:
.photoBackground {
transition: box-shadow 0.3s ease;
}
.photoBackground:hover{
box-shadow: 0 0 0.938em rgba( 0, 0, 0, .7 );
transition: box-shadow 0.3s ease;
}
.photoBackground:hover .photoHoverEffect {
transition: opacity 0.4s ease;
opacity: 1;
}
.photoHoverEffect, .photoCaptionEffect {
height: 65px;
width: 100%;
margin-top: 155px;
background-color: rgba(18,18,18,0.6);
display: -webkit-inline-box;
opacity: 0;
transition: opacity 0.4s ease;
}
.photoCaptionEffect {
height: 85px;
opacity: 1;
position: absolute;
z-index: 1333;
margin-top: 365px;
}
.photoCaption, .photoCaptionBig {
font-family: raleway;
font-size: 13px;
color: #fff;
margin-top: 8px;
margin-left: 8px;
line-height: 16px;
display: -webkit-inline-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}Thank you!
- Magnus Pilegaard