jQuery 更改 z-index 以使单击的 div 出现在顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8568158/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing z-index to make a clicked div appear on top
提问by holyredbeard
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?
对我有什么建议吗？
回答by keeganwatkins
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 );
});
});
回答by Erwan
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);
});
回答by lonesomeday
I would approach this by making a jQuery plugin, so you don't have to worry about manually setting the z-indexand 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-indexwith any other code on your page.
如果您z-index在页面上设置任何其他代码，这将无法正常工作。
回答by Chris Brickhouse
you could do something like this with jquery:
你可以用 jquery 做这样的事情：
$('#div').click(function(){$(this).css('zIndex', '10000'});
$('#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。
回答by Evan
your idea of getting the highest z-index is the way to go I think.
我认为您获得最高 z-index 的想法是要走的路。
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);
}
});
回答by Evan
Simple! $(".classname").on("click",function(){$(".classname").css('z-index',0);$(this).css('z-index',1);});
简单的！ $(".classname").on("click",function(){$(".classname").css('z-index',0);$(this).css('z-index',1);});
