3 回答

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超7個(gè)贊
.imageOverlayStyle您要定位的是 clicked 的下一個(gè)兄弟的孩子,.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>

TA貢獻(xiàn)1770條經(jīng)驗(yàn) 獲得超3個(gè)贊
您可以class在整個(gè)文檔中找到并添加,如果您希望它僅添加到) 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>

TA貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超7個(gè)贊
將規(guī)則添加到樣式表,以便它們自動(dòng)應(yīng)用于新創(chuàng)建的元素。創(chuàng)建元素時(shí)鏈接 css() 方法: $('') 。appendTo(document. ... 動(dòng)態(tài)創(chuàng)建一個(gè)新樣式表:$("").
$('<img id="newImage" src="text.jpg"/>')
.appendTo(document.body)
.css(style);
動(dòng)態(tài)創(chuàng)建一個(gè)新的樣式表:
$("<style>").text("#myNewEl { width:40px; height:35px; }").appendTo("head");
- 3 回答
- 0 關(guān)注
- 144 瀏覽
添加回答
舉報(bào)