web-dev-qa-db-fra.com

Changer le z-index pour faire apparaître une div cliquée au dessus

Dans mon application, je peux ouvrir plusieurs boîtes div qui se chevauchent. Lorsque vous cliquez sur une case, cette case doit être déplacée vers le haut. Quelle est la meilleure façon d'y parvenir?

La seule chose à laquelle je peux penser est de parcourir en boucle toutes les valeurs de z-index des zones pour obtenir la valeur la plus élevée, puis d'ajouter 1 à cette valeur et de l'appliquer au div cliqué.

Des conseils pour moi?

jquerycssz-index
11
holyredbeard

quelque chose comme ça devrait le faire:

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

En supposant que vous ayez des éléments avec une classe spécifique ("box" dans mon exemple) et que tous sont dans le même conteneur, comme ceci:

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

En supposant que vous ayez le bon css:

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

Vous pouvez utiliser le code jquery js ci-dessous: 

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

J'aborderais ceci en créant un plugin jQuery, pour que vous n'ayez pas à vous préoccuper de la définition manuelle du z-index et du suivi de la valeur la plus élevée avec une variable:

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

Cela ne fonctionnerait pas bien si vous définissez z-index avec un autre code sur votre page.

4
lonesomeday

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

0
degeaba

vous pouvez faire quelque chose comme ceci avec jQuery:

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

cela fonctionnera tant que l'index z pour tous les divs sous-jacents est inférieur à 10000. ou vous pouvez écrire une fonction pour itérer tous les divs et obtenir l'index z le plus élevé et déplacer le clic sur +1.

0
Chris Brickhouse

je pense que votre idée d’obtenir le plus haut indice z est la voie à suivre.

cependant, au lieu de le parcourir en boucle à chaque clic, je le ferais une seule fois lors du chargement de la page et je maintiendrais un objet stockant le plus grand index 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);
    }
});
0
Evan