jquery/javascript：在事件後設置z-index

Question

我正在顯示一堆圖像，我需要做的是淡出最上面的圖像，然後將它移動到堆棧的底部並將其不透明度恢復到1.0 。除了更改包含圖像的對象（div）上的z-index外，一切工作都正常。我絕對定位了div，儘管我正在動態創建它，不確定這是否會產生影響。這裏是我的代碼[注：進出淡入被註釋爲現在調試目的]：

// JavaScript Document 

var Summary = {}; 

Summary.hasTemplate = true; 
Summary.template = { 

    summaryID : 'pageName', 
    itemCount : 5, 
    speed : 2000, 
    pause : 2000, 
    imgDirectoryPath : 'css/images/summaryImages/', 
    imgPrefix : '26_01_010_###', 
    imgExtension : '.png', 
    imgCountStart : 1, 
    imgCountEnd : 5, 
    imgStep : 1, 
    imgSize : {width : 400, height : 400}, 
    imgFiles : {}, 
    containerPos : {x : 0, y : 0} 
} 


function buildSummary() { 

var summaryCode = "<div id='summaryWrapper'>"; 

//check to see if the summary is running off a template or unique files 
if (Summary.hasTemplate == true) { 

    //set a number to start our img count from (one less than the start number in the object) 
    var imgNum = Summary.template.imgCountStart-1; 

    //build an array of the img prefix components 
    var imgPrefixComponents = Summary.template.imgPrefix.split("_"); 

    //check to see if there is more than one underscore, then build out the image prefix 
    var imgPrefix = ""; 
    if (imgPrefixComponents.length < 2) { 
     imgPrefix = imgPrefixComponents[0] + "_"; 
    } else { 
     for(var p=0; p<imgPrefixComponents.length; p++) { 
      if (p != imgPrefixComponents.length-1) { 
       imgPrefix += imgPrefixComponents[p] + "_"; 
      } 
     } 
    } 

    var imgExtension = Summary.template.imgExtension; 

    //get the count of the leading zeroes (use length-1 in case the image name contains other underscores) 
    var zeroCount = imgPrefixComponents[imgPrefixComponents.length-1].match(/#/g).length; 

    //build out the image prefix 
    for(z=0; z<zeroCount; z++) { 
     imgPrefix += "0" 
    } 

    //loop through the image count 
    for (i=0; i<Summary.template.itemCount; i++) { 

     //increment the image number 
     imgNum++; 

     //start building the image wrapper 
     var imgWrapperCode = "<div class'summaryImg' pageID='" + Summary.template.summaryID + "' thisImg='summaryImg_" + imgNum + "' style='z-index:" + (100+imgNum) + "; position: absolute; top: 100; left: 100; width:" + Summary.template.imgSize.width +"; height: " + Summary.template.imgSize.width + ";'>"; 

     //get the img directory path 
     var imgDirectoryPath = Summary.template.imgDirectoryPath; 

     //build the imgFilePath 
     var imgFilePath = imgDirectoryPath + imgPrefix + imgNum + imgExtension 

     imgWrapperCode += "<img src='" + imgFilePath + "'></div>"; 

     summaryCode += imgWrapperCode; 

     Summary.template.imgFiles[i] = imgFilePath; 

    } 

} 

Summary.summaryCode = summaryCode; 
} 

function setUpSummaryFade() { 

//check to see if we are working with a template or not 
if (Summary.hasTemplate == true) { 

    //get an array of the image divs, the summaryID let's us target a page so we're not ligthing them all up at once 
    var imgDivs = $('div[pageID="' + Summary.template.summaryID + '"]'); 

    //build an array of z-indexes 
    var zIndexes = new Array(); 
    for (i=0; i<imgDivs.length; i++) { 

     var thisImgDiv = imgDivs[i]; 
     var thisZIndex = $(thisImgDiv).css('z-index'); 
     zIndexes.push(thisZIndex); 
    } 

    i = imgDivs.length; 
    setInterval(function() { 
     i--; 
     if (i > -1) { 
      fadeDivs(imgDivs[i], zIndexes, imgDivs); 
     } else { 
      i = imgDivs.length; 
     } 

    }, Summary.template.pause); 
} 
} 

function fadeDivs(thisDiv, zIndexes, imgDivs) { 

//$(thisDiv).fadeOut('slow'); 

//change it's z-index 
var maxZIndex = zIndexes[zIndexes.length-1]; 
var minZIndex = zIndexes[0]; 

for(z=0; z<imgDivs.length; z++) { 

    var thisDiv = imgDivs[z]; 
    var thisZIndex = $(thisDiv).css('z-index'); 

      //EDITS: Works on the first element, but not on the others 
    console.log("Start z: " + $(thisDiv).css('z-index')); 
    if (thisZIndex == maxZIndex) { 
     $(thisDiv).css('z-index', minZIndex); 
    } else { 
     $(thisDiv).css('z-index', thisZIndex+1); 
    } 
    console.log("End z: " + $(thisDiv).css('z-index')); 
} 

//bring it back to life 
//$(thisDiv).fadeIn('fast'); 

}

Answer 1

此行是錯誤的：

if (thisZIndex = maxZIndex) { 

返回true始終，你應該改爲

if (thisZIndex == maxZIndex) {