【发布时间】：2019-12-13 05:25:13
【问题描述】：
是否可以在 jquery 中将 css 添加到特定的动态创建的 div 中？我想向特定的 div 添加叠加层，但试图找到一种方法将 id 从动态创建的 div 传递到 jquery 函数，以便仅将 CSS 规则添加到该特定的 div，这对我来说是一项任务。当我单击 div 时，它会将叠加层添加到所有这些中。 感谢您的宝贵时间，这是我的代码。
foreach($selectedPhotoResult as $rowSelect){
if($counter % 3 === 1){
echo '</div><div class="row">';
}
echo'
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 text-center picContainer">
<a class="overlayPicHL" data-overlayPicID-id="'.$row['ad_id'].'"><div class="price" style="position:absolute;top:0px;;right:15px;z-index:98;height:50px;width:50px;border-radius: 0px 5px 0px 0px;background-image: linear-gradient(to bottom, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0) 100%);"><i class="fa fa-eye" style="font-size:25px;color:#ffffff;position:absolute;top:10px;right:10px;"></i></div></a>
<div class="well photoControlsMain pht-brd-cl">
<a class="mainImageProfile" style="display:block;" data-userMain-id="'.$row['ad_user'].'" data-pic-id="'.$row['ad_photo_thumb'].'">
<div class="imageOverlayStyle">
Something here
</div>
<figure>
<img src="'.$row['ad_photo_thumb'].'" class="img-responsive imageSizingGallery imageProfileStyleSmall" style="object-fit: contain;" width="100%" alt=""/>
<div class="photoControlsMainImage">
<p style="z-index:9999;">
<span class="text-prt-und-bl usernameIndexPos">'.ucwords($row['industryName']).'</span>
<span class="adRateIndexPos">$'.$row['ad_rate'].'/hr</span>
';
if($userfile->member_is_loggedin()){
echo'<a class="userMsgID" data-toggle="modal" data-target="#msgUserModal" data-userSenduserID-id="'.$rowSelect['user_id'].'" data-userSend-id="'.$rowSelect['industryName'].'" data-username-modal="'.ucwords($rowSelect['industryName']).'"><span class="commentIcoPos"><i class="fa fa-comment-o"></i></span></a>';
if($favList->rowCount() > 0){
foreach($favListResult as $rowFav){
if($rowFav['user_fav_id'] == $user_id){
echo'<span class="heartIcoPosRed adUnFav" data-unfav-id="'.$rowFav['fav_id'].'"><a><i class="fa fa-heart heartIcoRedColor"></i></a></span></a>';
}
}
}else{
echo'<span class="heartIcoPos adFav" data-userFav-id="'.$user_id.'" data-fav-id="'.$row['ad_id'].'"><a class="heartIcoWhite"><i class="fa fa-heart"></i></a></span></a>';
}
echo city($row['ad_city']);
}else{
echo'</a>
<a class="loginDisplayHeader" style="display:none;"><span class="commentIcoPos"><i class="fa fa-comment-o"></i></span></a>
<a class="loginDisplayHeaderFull" id="loginFormShowHeader"><span class="commentIcoPos"><i class="fa fa-comment-o"></i></span></a>
<a class="loginDisplayHeader" style="display:none;"><span class="heartIcoPos heartIcoWhite"><i class="fa fa-heart"></i></span></a>
<a class="loginDisplayHeaderFull" id="loginFormShowHeader"><span class="heartIcoPos heartIcoWhite"><i class="fa fa-heart"></i></span></a>
';
echo city($row['ad_city']);
}
$likes = $conn->prepare("SELECT count(likes) as likeCount
FROM
likes
WHERE
user_accept_id = :adUserId
");
$likes->bindParam(":adUserId", $adUserId);
$likes->execute();
$likesFetch = $likes->fetchAll();
if($likes->rowCount() > 0){
foreach($likesFetch as $rowLikes){
echo'<span class="userLikeBtnLG">'.thousandsCurrencyFormat($rowLikes['likeCount']).' Likes <i class="fa fa fa-thumbs-o-up thbsUPND"></i></span>';
}
}
echo'</p>
</div>
</figure>
</div>
</div>
';
}
这是到目前为止的 jquery 代码
$(".overlayPicHL").on("click", function() {
const imageOverlayStyle =
$(this.nextElementSibling).find('.imageOverlayStyle');
$(imageOverlayStyle).css({
backgroundColor: 'yellow'
});
});
这是覆盖项的 CSS
.imageOverlayStyle {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
这是一个简单的叠加过渡，我只需要弄清楚如何将此叠加添加到从数据库中提取的特定 div 中......动态创建。我已经搜索了一段时间的解决方案，但还没有这样的运气。
【问题讨论】：
-
使用事件委托作为
$(document).on("click", "selector", function() {...}); -
感谢@DevsiOdedra 的帮助，我尝试了你的方式，但由于某种原因它不想在我的末端开火。如果我只使用 $(".imageOverlayStyle").css({"height":"100%"});然后它会显示在所有这些上，但是如果我使用您的 $(this).next 解决方案，它不会触发 css 规则
-
所以试试
$(this).next().css..它会工作 -
是的，由于某种原因 this.next 不想工作。 :( 当我删除 $(this).next 并且只有我的原始代码 $(".imageOverlayStyle").css({"height":"100%"}); 然后它会在所有动态图像上触发图像叠加图片，但是当我使用 $(this).next 时没有任何反应。:(