将框移到顶部（z-index）答案

【问题标题】：Moving a box to the top (z-index)将框移到顶部（z-index）
【发布时间】：2012-01-03 18:51:28
【问题描述】：

我有一个像虚拟桌面一样工作的应用程序，带有一个带有可点击图标的工具栏。单击图标时，会打开（动态创建）类似框的窗口，其中包含有关单击哪个图标的不同内容。

使用一个名为moveOnTop()（见下文）的函数，该函数在创建窗口时被调用，点击事件被绑定到该窗口。如果打开了多个窗口，并且用户单击排序在另一个窗口后面的窗口，则单击的窗口将移至顶部。

现在问题...

单击其中一个图标时，会打开一个显示一堆缩略图的框，当单击其中一个缩略图时，会打开一个带有该特定图像的新窗口。带有图像的窗口应该移动到顶部，但这不会发生，因为在创建带有图像的窗口之后，单击的缩略图框上的点击事件会被触发，这会导致该窗口被移动到顶部。

我不知道如何解释这个问题，希望你能明白我的意思。

Windows.prototype.buildWindow = function(){

    // a function that created the boxes

    Windows.prototype.moveOnTop();
}

Windows.openedImg = function(){

    // a function that creates the box with the clicked image

    var thisWindow = $(this);
Windows.prototype.getZindex(thisWindow);
}

Windows.prototype.moveOnTop = function(){

var boxes = $('.window');

    boxes.click(function() {
    
        var thisWindow = $(this);
        Windows.prototype.getZindex(thisWindow);
    });
}

Windows.prototype.getZindex = function(thisWindow){

var boxes = $('.window');
var maxZindex = 0;

    boxes.each(function() {

        var zIndex = parseInt($(this).css('z-index'), 10);
        maxZindex = Math.max(maxZindex, zIndex);
    });

thisWindow.css("z-index", maxZindex + 1);
}

【问题讨论】：

为什么不添加一些覆盖 z-index 的类名，而不是改组 Z-indices。这样，如果你删除类名，它就会恢复到原来的 z-index。
得说我没有挖掘你创建这个窗口对象的方式：Windows.prototype.buildWindow，Windows.openedImg。你用Windows.prototype.func(); 打电话，先生，我一点也不喜欢。
感谢@Chad 的建设性批评，非常有收获！叹息
老实说，你应该做几件事：你应该使用更简洁的方法构建这个对象，你应该使用一些类来识别活动窗口，而不仅仅是每次增加 z-index，我不查看您用来调用创建图像窗口的代码，我也不明白为什么您选择说Windows.openedImg 而不是Windows.prototype.openedImg，就像您对其他所有内容所做的那样。我看到的几乎所有代码都应该重写 IMO。
是的，我知道你对那个更清洁的方法是对的，我稍后会尝试这样做。关于 Windows.openedImg（实际上应该是“Windows.bgChanger.openedImg”。这是一个与 Windows 没有直接关系的函数，而是与从对象“Windows”继承的特定应用程序“bgChanger”相关的函数。但是我完全理解这是不可能从代码中知道的。不过，我很感谢您对我的代码的想法！

标签： javascript jquery events z-index jquery-events

【解决方案1】：

HTML：

<img onclick="openWindow(true)" ... />

Javascript：

function openWindow(doNotGoToTop) {
    ... //open window
    if (!doNotGoToTop) {
        ... //go to top
    }
}

【讨论】：