it-swarm-pt.tech

Alterando o z-index para fazer um div clicado aparecer no topo

Na minha aplicação, posso abrir várias caixas div que se sobrepõem umas às outras. Ao clicar em uma caixa, essa caixa deve ser movida para o topo. Qual é o melhor jeito de concluir isso?

A única coisa em que consigo pensar é percorrer todos os valores z-index das caixas para obter o valor mais alto e, em seguida, adicionar 1 a esse valor e aplicá-lo na div clicada.

Algum conselho para mim?

11
holyredbeard

algo assim deveria fazer isto:

// 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 );
    });
});
14
keeganwatkins

Supondo que você tenha elementos com uma classe específica ("box" no meu exemplo) e que todos estejam no mesmo contêiner como este:

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

Supondo que você tenha o css correto:

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

Você pode usar o código jquery js abaixo: 

$('.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);
});
5
Erwan

Eu abordaria isso fazendo um plug-in jQuery, para que você não precise se preocupar em configurar manualmente o z-index e manter o controle do valor mais alto com uma variável:

(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();
});

Isso não funcionaria bem se você configurasse z-index com qualquer outro código em sua página.

4
lonesomeday

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

0
degeaba

você poderia fazer algo assim com jquery:

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

isso funcionará desde que o z-index para todos os divs subjacentes seja menor que 10000. ou, você pode escrever uma função para iterar todos os divs e obter o maior z-index e mover o clique para esse número +1.

0
Chris Brickhouse

sua ideia de obter o maior z-index é o caminho a percorrer, eu acho.

no entanto, em vez de percorrê-lo em cada clique, passaria por ele apenas uma vez no carregamento da página e manteria um objeto que armazenasse o maior 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);
    }
});
0
Evan