Question

我还在学习JavaScript。我想只使用JavaScript而不是Jquery完成任务。

我正在尝试使用z-index操作多个div / images，以及一个随机化图像来到前面的按钮。

我得到了随机图像数组，但正如您在图像[1]中看到的那样...设置每个changeZ索引将是费力的。所以我正在着手改变类（如图[0]所示，这样我就可以在新图像中添加电流并在下一次发送时将电流发送到背景，然后删除类属性。我有元素到单独工作但无法将它们放在一个数组中。

function changeZIndex(i,id) { 
    document.getElementById(id).style.zIndex=i;}; 

function changeClassZIndex(i,tagName){
    document.getElementsByTagName("*").style.zIndex=i;};

function getImage(){ 

var whichImage=Math.floor(Math.random()*3); 

var image=new Array() 

var currentPhoto = div.current

image[0]=function() { 
    changeZIndex(5,"scene1"); 
    changeClassZIndex(-5,"current"); 
    currentPhoto.removeClass('current')
    document.getElementById("scene1").className += "current"; };


image[1]=function() { 
    changeZIndex(5,"scene2"); 
    changeZIndex(-5,"scene1");
    changeZIndex(-5,"scene3");
    changeZIndex(-5,"scene");  
}; 

image[2]=function() { 
    changeZIndex(5,"scene3"); 
    changeZIndex(-5,"scene");
    changeZIndex(-5,"scene2"); 
    changeZIndex(-5,"scene1");
}; 

image[whichImage].apply(undefined);};

Answer 1

首先，我相信你的问题可能在changeClassZIndex（i，tagName）应该看起来像这样：

if (document.getElementsByClassName == undefined) {
    document.getElementsByClassName = function(className)
    {
        var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
        var allElements = document.getElementsByTagName("*");
        var results = [];

        var element;
        for (var i = 0; (element = allElements[i]) != null; i++) {
            var elementClass = element.className;
            if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
                results.push(element);
        }

        return results;
    }
}

function changeClassZIndex(z,className) {
    var e = document.getElementsByClassName(className);
    for(var i = 0; i < e.length; i++) {
        e[i].style.zIndex = z;
    }
};

我定义了getElementsByClassName函数，如果它不存在，因为某些浏览器可能不支持它。

我可能会建议您采用不同的方法解决问题：

var images = new Array("scene1", "scene2", "scene3");

var currentPhoto = div.current
var whichImage = Math.floor(Math.random()*images.length);

// change all images to the background
for(var i = 0; i < images.length; i++)
{
    changeZIndex(-5, images[i]);
}
// change the one you want to the top
changeZIndex(5, images[whichImage]);

这样您就不必为每个图像编写函数，添加图像就像添加到数组一样简单。

Answer 2

这是因为document.getElementsByTagName（）返回一个array个元素，你无法进行这样的操作。相反，您需要通过它们进行枚举并单独执行操作。

这是一个有效的jsfiddle，它显示了如何做到这一点：jsfiddle

作为旁注：如果有很多网络编程会教你一件事，那就是：

永远，永远，排除jQuery作为选项。

JQuery是你最好的朋友，在这种情况下使用它会使你的代码行减少一半以上。

使用z-index更改类

2 个答案: