使對象尺寸相同的Javascript

所以我一直在對這個代碼進行調用，希望將一堆對象的大小調整爲與最高的對象相同的高度。我將它們分組，以便您可以有五個獨立的項目組，這些項目的大小都會達到組中最高元素的高度。我製作了一個名爲「sizeHeightToOther」的自定義屬性。這個想法是，你可以將它添加到一個元素，並將「sizeHeightToOther」設置爲等於組（'1'，'2'，'3'，'4'或'5'）。不幸的是，代碼無法正常工作。這是我迄今爲止所擁有的。任何幫助將非常感激，任何人如果歡迎使用它，一個錯誤就會被發現。使對象尺寸相同的Javascript

function SizeHeightToOthers() { 
 

 
    //The following function gets the heights of each element in the element arrays: 
 
    function GetHeights(elementArray) { 
 
    elementHeightArray = new float[elementArray.length]; 
 
    for (int i = 1; i < elementArray.length; i++) { 
 
     elementHeightArray[i] = elementArray.height(); 
 
    } 
 
    return elementHeightArray; 
 
    } 
 

 

 
    //The following function gets the max height from each height array: \t 
 
    function GetMaxs(elementHeightArray) { 
 
    var currentValue = elementHeightArray[0]; 
 
    for (var i = 1; i < elementHeightArray.length; i++) { 
 
     if (elementHeightArray[i] > currentValue) { 
 
     currentValue = elementHeightArray[i]; 
 
     } 
 
    } 
 
    return value; 
 
    } 
 

 
    //The following function changes all of the heights of the elements in the element array to be the same as the max height from that array. 
 
    function changeHeights(elementArray, elementHeightArray, maxHeight) { 
 
    for (int i = 0; i < elementArray.length; i++) { 
 
     if (elementHeightArray[i] < maxHeight) { 
 
     elementArray[i].height(maxHeight); 
 
     } 
 
    } 
 
    } 
 

 

 

 
    //var numberOfElements = $("[sizeHeightToOtherGroup]").size(); 
 
    var elementArrayOne = $("[sizeHeightToOther='1']").toArray(); 
 
    var elementArrayTwo = $("[sizeHeightToOther='2']").toArray(); 
 
    var elementArrayThree = $("[sizeHeightToOther='3']").toArray(); 
 
    var elementArrayFour = $("[sizeHeightToOther='4']").toArray(); 
 
    var elementArrayFive = $("[sizeHeightToOther='5']").toArray(); 
 

 

 
    var elementHieghtArrayOne = GetHeights(elementArrayOne); 
 
    var elementHieghtArrayTwo = GetHeights(elementArrayTwo); 
 
    var elementHieghtArrayThree = GetHeights(elementArrayThree); 
 
    var elementHieghtArrayFour = GetHeights(elementArrayFour); 
 
    var elementHieghtArrayFive = GetHeights(elementArrayFive); 
 

 
    changeHeights(elementArrayOne, elementHeightArrayOne, GetMaxs(elementHeightArrayOne)); 
 
    changeHeights(elementArrayTwo, elementHeightArrayTwo, GetMaxs(elementHeightArrayTwo)); 
 
    changeHeights(elementArrayThree, elementHeightArrayThree, GetMaxs(elementHeightArrayThree)); 
 
    changeHeights(elementArrayFour, elementHeightArrayFour, GetMaxs(elementHeightArrayFour)); 
 
    changeHeights(elementArrayFive, elementHeightArrayFive, GetMaxs(elementHeightArrayFive)); 
 
} 
 

 

 
$(function() { 
 
     SizeHeightToOthers(); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 

 
<body> 
 
    <img src="https://upload.wikimedia.org/wikipedia/en/6/6f/Smiley_Face.png" sizeHeightToOthers='1' id="faceOne"> 
 
    <img src="http://img1.123freevectors.com/wp-content/uploads/new/icon/075-smiley-face-vector-art-free-download-l.png" sizeHeightToOthers='1' id="faceTwo"> 
 
</body>

我真的很抱歉，如果這是真的東西愚蠢的，我是相當新的JavaScript的，但有很多其他語言的經驗。

來源

2016-03-06 Micah

在第一眼看到：'GetMaxs'返回'value'，而不是'currentValue' – deamentiaemundi

是否有使用*古* jQuery的版本具體原因是什麼？ – nietonfir

不知道這個答案，但與getHeights的瓦爾（）的拼寫錯誤「..hiegth」

var elementH ie ghtArrayOne

所以GetMaxs()將失敗

來源

2016-03-06 18:56:50 yezzz

至少有一些問題在這裏與代碼。首先，你正在加載jQuery對象上沒有toArray方法的舊版jQuery。您的屬性選擇器與實際的HTML標記之間也存在不匹配。

下面的代碼應該完成你想要做的事情。這裏可能有一些JS特性，可能不熟悉，具體取決於你來自哪種語言。 Math.max.apply(...可能是最特別的。它通過創建所有元素高度的數組返回最大高度，然後使用.apply()方法在單次調用中從數組中檢索最大值。

$(function() { 
 
    var sizeGroups = [1, 2, 3, 4, 5]; 
 

 
    sizeGroups.forEach(function (size) { 
 
     sizeToMaxHeight($('[sizeHeightToOthers="' + size + '"]').toArray()); 
 
    }); 
 

 
    function sizeToMaxHeight(els) { 
 
     var maxHeight = getMaxHeight(els); 
 

 
     els.forEach(function (el) { 
 
      $(el).height(maxHeight); 
 
     }); 
 

 
     function getMaxHeight(els) { 
 
      return Math.max.apply(null, els.map(function (el) { 
 
       return $(el).height(); 
 
      })); 
 
     } 
 
    } 
 
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
<body> 
 
    <img src="https://upload.wikimedia.org/wikipedia/en/6/6f/Smiley_Face.png" sizeHeightToOthers='1' id="faceOne"> 
 
    <img src="http://img1.123freevectors.com/wp-content/uploads/new/icon/075-smiley-face-vector-art-free-download-l.png" sizeHeightToOthers='1' id="faceTwo"> 
 
</body>

來源

2016-03-06 19:33:00

非常感謝！這太棒了！ – Micah

使對象尺寸相同的Javascript

回答

相關問題