如何將css更改應用於jquery中的此對象

此代碼在將自定義陰影調整爲圖像高度方面效果很好。但是，如果我將其應用於頁面上不同大小的圖像，則會將它們全部調整爲第一個圖像大小。我如何使它更具體？消隱語法。如何將css更改應用於jquery中的此對象

<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}); 
}

來源

2017-08-25 judith

希望你知道你取得第1的對象的參數的大小從對象的數組中的'$（「圖像配-與陰影」）'。爲了簡單起見，將它添加到一個循環中，這將按需要工作 – Sagar

您也可以製作一個jQuery插件，然後將其用於任何特定圖像。對於插件文檔檢查這個（https://learn.jquery.com/plugins/basic-plugin-creation） – Aman

這是沒有HTML沒有意義 – zer00ne

您需要遍歷每個圖像並單獨處理它們。沒有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}); 
    }) 

}

來源

2017-08-25 18:10:10 CumminUp07

我得到它使用$（this）.next（）。css（{「height 「：imgHeight}）; – judith

如何將css更改應用於jquery中的此對象

回答

相關問題