Изменение z-индекса, чтобы сделать щелчок div сверху

В моем приложении я могу открыть несколько полей div, которые перекрывают друг друга. При нажатии на поле, которое окно должно быть перемещено в верхнюю часть. Каков наилучший способ сделать это?

Единственное, что я могу придумать, - это перебрать все значения z-index в ящики, чтобы получить самое высокое значение, а затем добавить 1 к этому значению и применить его к нажатому div.

Любые советы для меня?

Ответы

Ответ 1

что-то вроде этого должно это сделать:

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

Предполагая, что у вас есть элементы с определенным классом ( "поле" в моем примере), и все они находятся в одном контейнере:

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

Предполагая, что у вас есть правильный css:

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

Вы можете использовать код 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

Я бы подошел к этому, создав плагин 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();
});

Это не сработает, если вы установите z-index на любой другой код на своей странице.

Ответ 4

вы можете сделать что-то вроде этого с помощью jquery:

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

это будет работать до тех пор, пока z-индекс для всех базовых divs будет ниже 10000. Или вы можете написать функцию для итерации всех div и получения наивысшего z-индекса и перемещения клика на это число +1.

Ответ 5

Ваша идея получить наивысший z-индекс - это способ пойти, я думаю.

однако, вместо того, чтобы перебирать его по каждому клику, я прокручивал его только один раз при загрузке страницы и поддерживал бы объект, в котором хранится самый высокий 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);
    }
});