Zmiana indeksu z, aby kliknięcie div pojawiło się na górze

Question

W mojej aplikacji mogę otworzyć kilka pól div, które nakładają się na siebie. Po kliknięciu na pole to pole należy przenieść na górę. Jaki jest najlepszy sposób na osiągnięcie tego?

Jedyne, co mogę wymyślić, to przechodzenie przez wszystkie wartości z-pola skrzynek, aby uzyskać najwyższą wartość, a następnie dodanie 1 do tej wartości i zastosowanie jej w klikniętym div.

Jakieś rady dla mnie?

Answer 1

coś takiego powinien zrobić:

// 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

Chciałbym podejść do tego poprzez plugin jQuery, więc nie trzeba się martwić o ręczne ustawienie śledzeniem z-index i najwyższej wartości ze zmiennej:

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

To nie będzie działać dobrze, jeśli ustawisz z-index z jakimkolwiek innym kodem na twojej stronie.

Answer 3

można zrobić coś takiego z jQuery.

$ ('# div') kliknij (function() {$ (this) .css ('zindex', '10000'});

to będzie działać tak długo, jak długo indeks z dla wszystkich podstawowych elementów div będzie mniejszy niż 10000. Można też napisać funkcję do iterowania wszystkich elementów div i uzyskania najwyższego indeksu z-z i przeniesienia klikniętego na tę liczbę +1.

Answer 4

Twój pomysł na uzyskanie najwyższego indeksu Z jest drogą do zrobienia.

Jednak zamiast pętli za każdym kliknięciem, przechodzę przez to tylko raz na ładowanie strony i utrzymuję obiekt, który przechowuje najwyższy indeks Z.

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

Zakładając, że elementy o („pole” w moim przykładzie) określonej klasy i że wszyscy są w tym samym pojemniku jak ten:

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

Zakładając, że masz poprawny css:

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

można użyć jQuery js poniższy kod:

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