3 回答

TA貢獻1784條經驗 獲得超7個贊
.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>

TA貢獻1770條經驗 獲得超3個贊
您可以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>

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