當用於兄弟姐妹時，Outerwidth（）函數返回0

我有4個不同的div帶有圖像縮略圖。縮略圖點擊我已經創建了一個jQuery腳本來放大圖像。放大圖像適用於第一頁#C1，但其餘頁面，outerWidth返回0.因此，放大圖像未按預期顯示。類集合列在CSS中設置爲display: none。在點擊下拉菜單時，我使用來隱藏它的所有兄弟，並顯示當前的＃（href屬性）。我無法使用visibility:hidden，因爲它完全隱藏了頁面。當用於兄弟姐妹時，Outerwidth（）函數返回0

如何爲所有其他頁面使用outerWidth()功能。

<div class="collection-column" id = "#c1">....</div> 
<div class="collection-column" id = "#c2">....</div> 
<div class="collection-column" id = "#c3">....</div> 
<div class="collection-column" id = "#c4">....</div>

有沒有人有類似的問題？請幫忙！！

來源

2017-10-17 Usha

好了，到時候你打電話外寬，你的形象還沒有加載。使用圖像加載事件來進行計算。 –

它的第一頁「＃C1」正常工作，它返回outerWidth（）的正確值。但不適用於其他頁面＃C2，＃C3等。 – Usha

無法獲取隱藏元素的尺寸。但是有一些解決方法。 –

有關於此問題的解決方法將位置設置爲絕對並將元素移動到不可見區域。然後得到它的尺寸並恢復原來的位置。

var getStyle = function (el, prop) { 
    if (typeof getComputedStyle !== 'undefined') { 
     return getComputedStyle(el, null).getPropertyValue(prop); 
    } else { 
     return el.currentStyle[prop]; 
    } 
} 

var getOuterWidth = function(element){ 
    var originalDisplay = getStyle(element.get(0), "display"); 
    if(originalDisplay == "hidden"){ 
     var originalPos = getStyle(element.get(0), "position"); 
     var originalLeft = getStyle(element.get(0), "left"); 
     var originalTop = getStyle(element.get(0), "top"); 
     element.css({ top : -10000, left: -10000, position: "absolute", display: "block" }); 
    } 

    var outerWidth = element.outerWidth(); 

    if(originalDisplay == "hidden"){ 
     element.css({ top : originalTop, left: originalLeft, position: originalPosition, display: originalDisplay }); 
    } 

    return outerWidth; 
}

用法：

getOuterWidth($("#c4"));

來源

2017-10-18 05:22:32

謝謝。但我不知道如何使用它。讓我給我的問題清楚的圖片..這是我的網站鏈接： http://ushaprudhvi.000webhostapp.com/ 在收集鏈接下，我有四個頁面的鏈接。目前第二個（作物上衣和裙子）和第三個鏈接（手提包）試圖顯示圖像縮略圖，他們使用的是「collecion-column」相同的類名。當我點擊縮略圖時，它正在放大圖像。該功能可以在第二個鏈接上正常工作。但不是與第三個鏈接。 – Usha

由於公司防火牆的原因，我無法打開該網址。 –

當用於兄弟姐妹時，Outerwidth（）函數返回0

回答

相關問題