如何将css规则添加到jquery中动态创建的元素
是否可以将 css 添加到 jquery 中特定的动态创建的 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>
';
这是一个简单的覆盖过渡，我只需要弄清楚如何将此覆盖添加到从数据库中提取的特定 div 中......动态创建。我已经寻找了一段时间的解决方案，但还没有这样的运气。
慕工程01019073回答
-
噜噜哒
.imageOverlayStyle您要定位的是 clicked 的下一个兄弟的孩子，.overlayPicHL所以使用nextElementSiblingand [0]：$(".overlayPicHL").on("click", function() { const imageOverlayStyle = $(this.nextElementSibling).find('.imageOverlayStyle'); $(imageOverlayStyle).css({ backgroundColor: 'yellow' });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><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'].'">overlayPicHL <div class="price"><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">usernameIndexPos</span> <span class="adRateIndexPos">adrate</span> </p> </div> </figure> </a> </div></div><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'].'">overlayPicHL <div class="price"><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">usernameIndexPos</span> <span class="adRateIndexPos">adrate</span> </p> </div> </figure> </a> </div></div> -
德玛西亚99
您可以class在整个文档中找到并添加，如果您希望它仅添加到) div中css，您可以使用next()next($(document).on("click", ".overlayPicHL", function(){ var id = $(this).attr("data-overlayPicID-id"); $(this).next(".imageOverlayStyle").css({"height":"100%"}); //<-this is the css I want to add to the specific div when the icon has been clicked});.imageOverlayStyle { position: absolute; bottom: 0; left: 0; right: 0; background-color: #008CBA; overflow: hidden; width: 100%; height: 0; transition: .5s ease;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><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="imageOverlayStyle" id="imgOvrlayID" data-imgOvly-id="'.$row['ad_id'].'"> Something here</div> -
牧羊人nacy
将规则添加到样式表，以便它们自动应用于新创建的元素。创建元素时链接 css() 方法： $('') 。appendTo(document. ... 动态创建一个新样式表：$("").$('<img id="newImage" src="text.jpg"/>').appendTo(document.body).css(style);动态创建一个新的样式表：$("<style>").text("#myNewEl { width:40px; height:35px; }").appendTo("head");
随时随地看视频慕课网APP
PHP