更改z-index以使单击的div显示在顶部

In my application I can open several div boxes that overlap each other. When clicking on a box that box should be moved to the top. What is the best way to accomplish this?

在我的应用程序中,我可以打开几个相互重叠的div框。单击框时应将该框移动到顶部。完成此任务的最佳方法是什么?

The only thing I can think of is looping through all the boxes z-index values to get the highest value, and then add 1 to that value and apply it on the clicked div.

我唯一能想到的是循环遍历所有框z-index值以获得最高值,然后将1添加到该值并将其应用于单击的div。

Any advices for me?

对我有什么建议吗?

6 个解决方案

#1

something like this should do it:

这样的事情应该这样做:

// Set up on DOM-ready
$(function() {
    // Change this selector to find whatever your 'boxes' are
    var boxes = $("div");

    // Set up click handlers for each box
    boxes.click(function() {
        var el = $(this), // The box that was clicked
            max = 0;

        // Find the highest z-index
        boxes.each(function() {
            // Find the current z-index value
            var z = parseInt( $( this ).css( "z-index" ), 10 );
            // Keep either the current max, or the current z-index, whichever is higher
            max = Math.max( max, z );
        });

        // Set the box that was clicked to the highest z-index plus one
        el.css("z-index", max + 1 );
    });
});

#2

Assuming you have elements with a specific class ("box" in my example) and that all are in the same container like this :

假设你有一个特定类的元素(在我的例子中为“box”),并且所有元素都在同一容器中,如下所示:

<div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

Assuming you have the correct css :

假设你有正确的CSS:

.box {position:absolute; z-index:10}

You can use the jquery js code below :

您可以使用下面的jquery js代码:

$('.box').click(function() {
   // set ohters element to the initial level
   $(this).siblings('.box').css('z-index', 10);
   // set clicked element to a higher level
   $(this).css('z-index', 11);
});

#3

I would approach this by making a jQuery plugin, so you don't have to worry about manually setting the z-index and keeping track of the highest value with a variable:

我会通过制作一个jQuery插件来解决这个问题,因此您不必担心手动设置z-index并使用变量跟踪最高值:

(function() {
    var highest = 1;

    $.fn.bringToTop = function() {
        this.css('z-index', ++highest); // increase highest by 1 and set the style
    };
})();

$('div.clickable').click(function() {
    $(this).bringToTop();
});

This wouldn't work well if you set z-index with any other code on your page.

如果您使用页面上的任何其他代码设置z-index,这将无法正常工作。

#4

you could do something like this with jquery:

你可以用jquery做这样的事情:

$('#div').click(function(){$(this).css('zIndex', '10000'});

this will work as long as the z-index for all underlying divs is lower than 10000. or, you could write a function to iterate all divs and get the highest z-index and move the clicked on to that number +1.

只要所有底层div的z-index低于10000,这都可以工作。或者,您可以编写一个函数来迭代所有div并获得最高的z-index并将单击的数字移动到该数字+1。

#5

your idea of getting the highest z-index is the way to go I think.

你认为获得最高z指数的想法是我想要的。

however, instead of looping through it on each click, I would loop through it only once on the load of the page and maintain an object that stores the highest z-index.

但是,不是在每次单击时循环遍历它,我只在页面加载时循环它一次并维护一个存储最高z-index的对象。

CONSTANTS = {
    highest_z_index = 0;
};

function getHighestZ (){
    var $divs = $('div');

    $.each($divs,function(){
        if (this.css('z-index') > CONSTANTS.highest_z_index){
            CONSTANTS.highest_z_index = this.css('z-index');
        }
    });
}

getHighestZ();

$('#YourDiv').click(function(){
    if (CONSTANTS.highest_z_index > $(this).css('z-index'){
         $(this).css('z-index',++CONSTANTS.highest_z_index);
    }
});

#6

Simple! $(".classname").on("click",function(){$(".classname").css('z-index',0);$(this).css('z-index',1);});

#1