Thay đổi chỉ mục z để thực hiện div được nhấp xuất hiện trên đầu trang

Question

Trong ứng dụng của tôi, tôi có thể mở nhiều hộp div chồng lên nhau. Khi nhấp vào hộp, hộp đó sẽ được di chuyển lên trên cùng. cách tốt nhất để thực hiện điều này là gì?

Điều duy nhất tôi có thể nghĩ là lặp qua tất cả các giá trị z-index của hộp để nhận giá trị cao nhất, sau đó thêm 1 vào giá trị đó và áp dụng nó trên div được nhấp.

Bất kỳ lời khuyên nào cho tôi?

Answer 1

một cái gì đó như thế này nên làm điều đó:

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

tôi sẽ tiếp cận này bằng cách làm cho một plugin jQuery, vì vậy bạn không cần phải lo lắng về việc tự thiết lập các z-index và theo dõi các giá trị cao nhất với một biến:

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

này sẽ không hoạt động nếu bạn đặt z-index với bất kỳ mã nào khác trên trang của bạn.

Answer 3

bạn có thể làm một cái gì đó như thế này với jquery:.

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

điều này sẽ hoạt động miễn là chỉ mục z cho tất cả các div nằm dưới thấp hơn 10000. Hoặc bạn có thể viết hàm để lặp tất cả các div và nhận chỉ mục z cao nhất và di chuyển nhấp vào số đó +1.

Answer 4

ý tưởng của bạn nhận được chỉ số z cao nhất là cách tôi nghĩ. Tuy nhiên,

tuy nhiên, thay vì lặp qua nó trên mỗi lần nhấp, tôi sẽ chỉ lặp lại nó một lần trên tải trang và duy trì một đối tượng lưu trữ chỉ mục z cao nhất.

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

Giả sử bạn có các yếu tố với một lớp cụ thể ("hộp" trong ví dụ của tôi) và rằng tất cả đều trong cùng một container như thế này:

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

Giả sử bạn có css đúng:

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

Bạn có thể sử dụng jquery js mã bên dưới:

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