更改的getElementById到getElementsByClassName方法

我肯定是在JS一個共同的問題，我已經創建了調整功能使用JS，最初這個功能只是將要在我的網站的一個項目中使用，但現在我已經選擇使用它多個項目。我的JS功能目前使用document.getElementById(id);不過，我想改變這種做法，它看起來出來的類名.resize。如何才能做到這一點？下面是我的JS更改的getElementById到getElementsByClassName方法

function ebi(id){ 
     return document.getElementById(id); 
    } 
    if(ebi('resize') 
     .complete==true){ 
     iscale(ebi('')); 
    } 
    ebi('resize') 
    .onload=function(){iscale(this); 
    } 

    function iscale(o){ 
     //alert(o.width); 
    var sar=o.width/o.height; 
    var tar=1,tiw,tih,xoff,yoff; 
    if(o.width<=425&&o.height<=467){ 
     tiw=o.width; 
     tih=o.height; 
    }else if(tar>sar){ 
     tiw=425*sar; 
     tih=467; 
    } 
    else{ 
     tiw=425; 
     tih=467/sar; 
    } 
    xoff=(680-tiw)>>1; 
    yoff=(209-tih)>>1; 
    //alert(xoff); 
    o.width=tiw;o.height=tih; 
    o.style.top=yoff+"px"; 
    o.style.left=xoff+"px"; 
    } 
function $(id){return document.getElementById(id);}

HTML

<section id="homeSlide" class="shadow"> 
    <img id="resize"class='opaque' src="http://www.colette.fr/media/push/pony_.jpg" /> 
    <img id="resize" src="http://www.colette.fr/media/push/EGIFT_.jpg" /> 
    <img id="resize" src="http://www.colette.fr/media/push/swa_mmm_001255.jpg" /> 
</section>

目前的調整大小功能僅適用於第一個圖像的片段，但是其他的圖像不會進行調整。在任何人攻擊我的web標準之前，img標籤中的id只是爲了測試這個函數。

來源

2013-12-16 NewKidOnTheBlock

你試過document.getElementsByClassName？更改所有的img id到課堂上，然後嘗試 – Gowsikan

@Gowsikan yup試過，但是我得到一個錯誤，我以爲是那麼簡單，我自己 – NewKidOnTheBlock

點是id應該是唯一的，做你想做什麼，爲什麼你不使用jQuery。使用jQuery，你可以很容易地做你想做的，使用這種

jQuery("#homeSlide>img")

，您還可以補充一點：

jQuery("#homeSlide>img").each(function(imgNode){ 
    resize(imgNode); 
});

，但如果你想這樣做沒有jQuery，至於像getElementsByClassName一些功能和getElementsByTagName不跨瀏覽器，你最好試試這個：

var homeSlide = document.getElementById('homeSlide'); 
var myImgNodes = []; 
for(var i=0;i<homeSlide.childNodes.length;i++){ 
    var childNode = homeSlide.childNodes[i]; 
    if(childNode.nodeType==1 && childNode.tagName.toLowerCase()=="img"){ 
     myImgNodes.push(childNode); 
    } 
}

事後myImgNodes會正是你想。

我只是改變了你的小提琴例子，並試圖不改變你的功能，你可以看看這個，它完美的作品。 This is your updated jsfiddle DEMO

來源

2013-12-16 11:00:25

因此我在我的問題中說：「在任何人攻擊我有關web標準之前，img標記中的id只是爲了測試函數。 – NewKidOnTheBlock

我不是故意要攻擊你的，因爲我經歷了這個非常艱鉅的任務，我只是想爲你節省一點時間，無論如何對此感到抱歉。玩得很開心。 –

謝謝，我欣賞幫助 – NewKidOnTheBlock

ID必須是唯一的，這就是爲什麼這次沒作品。

您可以使用document.getElementsByClassName()（像你想象的）：簡單地增加（而不是id="resize"）class="resize"，並使用該類型的循環：

function callResize() 
{ 
    var elements = document.getElementsByClassName("resize"); 
    for (var i=0;i<elements.length;i++) 
    { 
    var element = elements[i]; 
    // do things with element 
    iscale(element); 
    } 
} 
document.getElementById('homeSlide').onload = function(){callResize();}

來源

2013-12-16 10:49:55 Asenar

有點困惑，我有我的JS作爲以下給我一個錯誤消息。 ..http：//jsfiddle.net/newkidontheblock/QFK6Y/ – NewKidOnTheBlock

你不需要聲明函數$（ID）既不EBI。讓我編輯我的答案 – Asenar

嗨，我很努力讓這個工作，你能夠上傳到jsfiddle – NewKidOnTheBlock

首先，一個ID必須爲你的HTML文檔中是唯一的。但在您的示例代碼中，您將ID分配爲「調整大小」三次。只需替換所有三個元素的ID並添加class="resize"。

其次，我建議使用jQuery.each()方法迭代返回的集合而不是循環。

例子：

var elements = document.getElementsByClassName("resize") 

jQuery.each(elements, function(element) { 
    iscale(element) 
})

來源

2013-12-16 11:30:34 ToniTornado

更改的getElementById到getElementsByClassName方法

回答

相關問題