Question

我确信这是JS中的一个常见问题，我使用JS创建了调整大小的功能，最初这个功能只会用在我网站的一个项目上，但是现在我选择在多个项目上使用它。我的JS函数目前使用document.getElementById(id);但是我想更改它，以便查找类名.resize。如何才能做到这一点？下面是我的JS的片段

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_01239.jpg" />
    <img id="resize" src="http://www.colette.fr/media/push/EGIFT_01234.jpg" />
    <img id="resize" src="http://www.colette.fr/media/push/swa_mmm_001255.jpg" />
</section>

目前，调整大小功能仅适用于第一张图像，但其他图像不会调整大小。在任何人攻击我关于网络标准之前，img标签中的id只是为了测试这个功能。

Answer 1

id必须是唯一的，这就是为什么这不起作用。

您可以使用document.getElementsByClassName()（按照您的想法）：只需添加class="resize"（而不是id="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();}

Answer 2

要点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

Answer 3

首先，ID必须在HTML文档中是唯一的。但是在您的示例代码中，您将ID“调整大小”三次。只需替换所有三个元素中的ID，然后添加class="resize"。

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

示例：

var elements = document.getElementsByClassName("resize")

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

将getElementById更改为getElementsByClassName

3 个答案: