1

私はまだJavaScriptを学んでいます。JavaScriptのみを使用してJqueryを使用せずにタスクを完了したいと思います。

z-indexを使用して操作しようとしている複数のdiv/画像と、画像をランダム化して前面に表示するボタンがあります。

ランダムな画像配列を機能させましたが、image [1]でわかるように、各changeZインデックスの設定は面倒です。そこで、クラスの変更に着手しています（image [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);};
4

2 に答える 2

0

これは、document.getElementsByTagName（）がarray要素のを返すためです。このような操作は実行できません。代わりに、それらを列挙して、個別に操作を行う必要があります。

これがその方法を正確に示す実用的なjsfiddleです：jsfiddle

補足として：多くのWebプログラミングが教えてくれることが1つあるとすれば、それは次のとおりです。

オプションとしてjQueryを除外しないでください。

JQueryはあなたの親友であり、この状況でJQueryを使用すると、コード行が半分以上削減されます。

于 2012-08-09T17:59:11.590 に答える
0

まず、あなたの問題はおそらく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]);

そうすれば、画像ごとに関数を作成する必要がなく、画像を追加するのは配列に追加するのと同じくらい簡単です。

于 2012-08-09T17:45:48.483 に答える