Tıklanan bir div yapmak için z-endeksi değiştirme üstte görünür.

Question

Uygulamamda birbiriyle çakışan birkaç div kutusu açabilirim. Bir kutuya tıklandığında, kutunun en üste taşınması gerekir. Bunu başarmanın en iyi yolu nedir?

Düşünebildiğim tek şey, en yüksek değeri elde etmek için tüm kutular z-endeksi değerlerinden geçerek, o değere 1 ekleyin ve tıklanan div üzerinde uygulayın.

Benim için herhangi bir tavsiyeniz var mı?

Answer 1

şey yapmalı:

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

Bir jQuery eklentisi yaparak bu yaklaşacağını söyledi, bu yüzden yaklaşık elle değişkenle en yüksek değerin z-index ve izlenmesi ayarı endişelenmenize gerek yoktur:

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

Bu işe yaramaz z-index'u sayfanızdaki diğer herhangi bir kodla ayarladıysanız.

Answer 3

Eğer Jquery ile böyle bir şey yapabileceğini.

$ ('# div') tıklayın (function() {$ (this) .css ('zIndex', '10000'});

bu, altta yatan tüm div'lar için z-endeksi 10000'den daha az olduğu sürece çalışacaktır veya tüm divleri yinelemek ve en yüksek z-endeksini almak ve tıklanan sayıyı +1'e taşımak için bir işlev yazabilirsiniz. böyle

Answer 4

en yüksek z-endeksini alma fikriniz gitmenin yoludur. Bununla birlikte, her bir tıklamada döngü yapmak yerine, yalnızca sayfanın yüküne bir kez girerim ve en yüksek z-endeksini depolayan bir nesneyi sürdürürdüm.

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

Belirli bir sınıf (bizim örneğimizde "kutu") ile elemanları var varsayarsak ve tüm bu böyle aynı kapta şunlardır:

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

Doğru css var varsayarsak:

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

:

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

aşağıdaki jquery js kodu kullanabilirsiniz