web-dev-qa-db-ja.com

クリックしたdivが上部に表示されるようにz-indexを変更する

私のアプリケーションでは、互いに重なり合う複数のdivボックスを開くことができます。ボックスをクリックすると、そのボックスが一番上に移動するはずです。これを達成するための最良の方法は何ですか？

私が考えることができる唯一のことは、すべてのボックスのZインデックス値をループして最高値を取得し、その値に1を追加して、クリックされたdivに適用することです。

私へのアドバイスは？

jquerycssz-index
11
holyredbeard

このようなものはそれを行うべきです：

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

特定のクラス（この例では「box」）の要素があり、すべてが次のように同じコンテナにあると仮定します。

<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);
});
5
Erwan

私は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
lonesomeday

シンプル！ $(".classname").on("click",function(){$(".classname").css('z-index',0);$(this).css('z-index',1);});

0
user5164720

あなたはjqueryでこのようなことをすることができます：

$（ '＃div'）。click（function（）{$（this）.css（ 'zIndex'、 '10000'}）;

これは、基礎となるすべてのdivのz-indexが10000未満である限り機能します。または、すべてのdivを反復して最高のz-indexを取得し、クリックした番号をその数値+1に移動する関数を記述できます。

0
Chris Brickhouse

最高のz-indexを取得するというあなたの考えは、私が考える方法です。

ただし、クリックするたびにループするのではなく、ページの読み込み時に1回だけループし、最高の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