Question

我有一个类似于

的数组

resourceData[0][0] = "pic1.jpg";
resourceData[0][1] = 5;

resourceData[1][0] = "pic2.jpg";
resourceData[1][1] = 2;

resourceData[2][0] = "pic3.jpg";
resourceData[2][1] = 900;

resourceData[3][0] = "pic4.jpg";
resourceData[3][1] = 1;

数字表示图像的z-index。最小z指数值为1.最大值（不是很重要）是2000。

我已经完成了所有渲染和设置z索引。我的问题是，我想要有四个功能：

// Brings image to z front
function bringToFront(resourceIndex) {

    // Set z-index to max + 1
    resourceData[resourceIndex][1] = getBiggestZindex() + 1;

    // Change CSS property of image to bring to front
    $('#imgD' + resourceIndex).css("z-index", resourceData[resourceIndex][1]);
}

function bringUpOne(resourceIndex) {

}

function bringDownOne(resourceIndex) {

}

// Send to back z
function sendToBack(resourceIndex) {

}

然后给出索引[3]（900 z）：

如果我们将它发送到后面，它将取值1，[3]将必须转到2，但这与具有2个z索引的[1]冲突，因此它们需要转到3等

有没有一种简单的方法可以做到这一点，因为一旦我开始这样做就会变得混乱。

重要，数组的索引不会改变。由于设计原因，我们无法对阵列进行排序。

更新感谢您的回答，我将在这里发布函数，如果有人在将来遇到这些函数（注意此代码在[6]中列出了zindex）

// Send to back z
function sendToBack(resourceIndex) {

    resourceData[resourceIndex][6] = 1;
    $('#imgD' + resourceIndex).css("z-index", 1);

    for (i = 0; i < resourceData.length; i++) {
        if (i != resourceIndex) {
            resourceData[i][6]++;
            $('#imgD' + i).css("z-index", resourceData[i][6]);
        }
    }    
}

Answer 1

循环！此功能将对其周围的受影响图像重新排序。它将适用于具有广泛分离的z-index值的图像。除非需要，否则它也不会执行任何更改。

编辑：添加了完成CSS工作的功能编辑2：修正了顶部/底部功能的问题 - 它没有移动所有受影响的图像，现在是。

var resourceData = Array();
resourceData[0] = Array();
resourceData[0][0] = "pic1.jpg";
resourceData[0][1] = 5;

resourceData[1] = Array();
resourceData[1][0] = "pic2.jpg";
resourceData[1][1] = 2;

resourceData[2] = Array();
resourceData[2][0] = "pic3.jpg";
resourceData[2][1] = 900;

resourceData[3] = Array();
resourceData[3][0] = "pic4.jpg";
resourceData[3][1] = 1;

function _doMoveImage(ptr) {
    // Change CSS property of image
    $('#imgD' + ptr).css("z-index", resourceData[ptr][1]);
}

// Brings image to z front
function bringToFront(resourceIndex) {
    var highest_idx = 0;
    for (var i = 0; i < resourceData.length; i++) {
        // for all images except the target
        if (i != resourceIndex) {
            // preserve the highest index we encounter
            if (highest_idx < resourceData[i][1])
                highest_idx = resourceData[i][1];
            // move any images higher than the target down by one
            if (resourceData[i][1] > resourceData[resourceIndex][1]) {
                resourceData[i][1]--;
                _doMoveImage(i);
            }
        }
    }

    // now move the target to the highest spot, only if needed
    if (resourceData[resourceIndex][1] < highest_idx) {
        resourceData[resourceIndex][1] = highest_idx;
        _doMoveImage(resourceIndex);
    }

    return;
}

function bringUpOne(resourceIndex) {
    var next_idx = 2000;
    var next_ptr = false;
    for (var i =0; i < resourceData.length; i++) {
        // for all images except the target
        if (
            i != resourceIndex &&  
            next_idx > resourceData[i][1] && 
            resourceData[i][1] > resourceData[resourceIndex][1]
        ){
            next_idx = resourceData[i][1];
            next_ptr = i;
        }
    }

    // only move if needed
    if (next_ptr) {
        // target takes next's index
        resourceData[resourceIndex][1] = resourceData[next_ptr][1];
        // next's index decreases by one
        resourceData[next_ptr][1]--;
        _doMoveImage(resourceIndex);
        _doMoveImage(next_ptr);
    }
    return;
}

function bringDownOne(resourceIndex) {
    var next_idx = 0;
    var next_ptr = false;
    for (var i =0; i < resourceData.length; i++) {
        // for all images except the target
        if (
            i != resourceIndex &&  
            next_idx < resourceData[i][1] && 
            resourceData[i][1] < resourceData[resourceIndex][1]
        ){
            next_idx = resourceData[i][1];
            next_ptr = i;
        }
    }
    // only move if needed
    if (next_ptr) {
        // target takes next's index
        resourceData[resourceIndex][1] = resourceData[next_ptr][1];
        // next's index decreases by one
        resourceData[next_ptr][1]++;
        _doMoveImage(resourceIndex);
        _doMoveImage(next_ptr);
    }
}

// Send to back z
function sendToBack(resourceIndex) {
    var lowest_idx = 2000;
    for (var i = 0; i < resourceData.length; i++) {
        // for all images except the target
        if (i != resourceIndex) {
            // preserve the lowest index we encounter
            if (lowest_idx > resourceData[i][1])
                lowest_idx = resourceData[i][1];
            // move any images lower than the target up by one
            if (resourceData[i][1] < resourceData[resourceIndex][1]) {
                resourceData[i][1]++;
                _doMoveImage(i);
            }
        }
    }

    // now move the target to the lowest spot, only if needed
    if (resourceData[resourceIndex][1] > lowest_idx) {
        resourceData[resourceIndex][1] = lowest_idx;
        _doMoveImage(resourceIndex);
    }
    return;
}

Answer 2

它是：复制您的结构并正确订购，或者如果您更喜欢将其称为索引。当你需要图片时找到合适的z-index并继续进行渲染。

如果您不想复制整个结构，可以动态地使用堆。

Answer 3

未经测试，但这是怎么回事。对于bringUpOne，请带上一个可以交换z索引的，例如：

function bringUpOne(resourceIndex) {

    var myZIndex = resourceData[resourceIndex][1];
    var nextZIndex =  resourceData[resourceIndex + 1][1];

    resourceData[resourceIndex][1] = nextZIndex;
    resourceData[resourceIndex + 1][1] = myZindex;

}

带到前面：

function bringToFront(resourceIndex) {

    var maxZIndex = resourceData[maxResourceIndex][1];
    resourceData[resourceIndex][1] = maxZIndex + 1;

}

现在一切都很好。但是如果你想连续将图像设置到后面会发生什么？您可以每次将zIndex设置为0（不知道您在任何时间实际可以看到多少），或者您可以从最低zIndex设置为2000或10000或其他任何东西，这将适应许多调用to setToBack。

编辑：这假设列表按zIndex排序以开始。

在数组中排序z索引

3 个答案: