如何将css更改应用于jquery中的此对象

Question

此代码在将自定义阴影调整为图像高度方面效果很好。但是，如果我将其应用于页面上不同大小的图像，则会将它们全部调整为第一个图像大小。我如何使它更具体？消隐语法。

<li class="col third impact-home">   
     <div class="image-with-overlay"> 
     <%= image_tag 'impact.jpg', :class => "image-with-shadow" %> 
     <div class="image-shadow"></div> 
     </div> 
    </li> 

$(document).ready(function() { //Fires when DOM is loaded 
    getImageSizes(); 
    $(window).resize(function() { //Fires when window is resized 
     getImageSizes(); 
    }); 
}); 

function getImageSizes() { 
    var imgHeight = $(".image-with-shadow").height(); 
    var imgMargin = (- imgHeight) * .995; 
    console.log(imgMargin); 
    $(".image-shadow").css({"height": imgHeight}); 
    $(".image-shadow").css({"margin-top": imgMargin}); 
} 

Answer 1

您需要遍历每个图像并单独处理它们。没有HTML我不知道如何.image-shadow涉及图像本身，但它可能是这个样子

function getImageSizes() { 
     $(".image-with-shadow").each(function() { 
      var imgHeight = $(this).height(); 
      var imgMargin = (- imgHeight) * .995; 
      console.log(imgMargin); 
      //need to select the image shadow in relation to each image 
      //with no HTML reference i'm not sure how it's laid out 
      $(this).closest(".image-shadow").css({"height": imgHeight}); 
      $(this).closest(".image-shadow").css({"margin-top": imgMargin}); 
    }) 

}