Modifica di z-index per far apparire un div cliccato in cima

Question

Nella mia applicazione posso aprire diverse caselle di div che si sovrappongono l'una all'altra. Quando si fa clic su una casella, quella casella deve essere spostata in alto. Qual è il modo migliore per farlo?

L'unica cosa che posso pensare è il looping di tutti i valori z-index di caselle per ottenere il valore più alto, quindi aggiungere 1 a quel valore e applicarlo sul div cliccato.

Qualche consiglio per me?

Answer 1

qualcosa come questo dovrebbe farlo:

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

Answer 2

vorrei affrontare questo facendo un plugin jQuery, in modo da non devono preoccuparsi di impostare manualmente l'z-index e tenere traccia del valore più alto con una variabile:

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

Questo non avrebbe funzionato bene se si imposta z-index con qualsiasi altro codice sulla tua pagina.

Answer 3

si potrebbe fare qualcosa di simile con jQuery:.

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

questo funzionerà fintanto che l'indice z per tutte le div sottostanti è inferiore a 10000. oppure, potresti scrivere una funzione per iterare tutte le div e ottenere lo z-index più alto e spostare il clic su quel numero +1.

Answer 4

la tua idea di ottenere lo z-index più alto è la strada da percorrere, credo.

tuttavia, anziché eseguirne il ciclo ad ogni clic, lo collegherei solo una volta al caricamento della pagina e manterrò un oggetto che memorizza lo z-index più alto.

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

Answer 5

a patto di avere elementi con una specifica classe ("box" nel mio esempio) e che tutti sono nello stesso contenitore come questo:

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

Supponendo di avere il css corretta:

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

È possibile utilizzare il codice jQuery js di seguito:

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