jQuery的 - z-index的操作和自動值，而不是數量

當你在短聲按鍵add new，jQuery的插入新dragrable DIVs到CONTAINER。當我點擊一些DIVs時，我想要更改z-index的值。但jQuery無法將z-index值作爲數字。它只顯示'auto' ...是否有解決方案顯示真正的Z指數值和increase it by 1？jQuery的 - z-index的操作和自動值，而不是數量

的jsfiddle實施例 - http://jsfiddle.net/ynternet/84nVQ/10/

HTML

<div id="add" style="background:yellow; width:100px;"> add new </div> 
<div id="container"> </div>

的jQuery

function handler() { 
    if ($(this).find("#menu").length) { 
     return; 
    } 
    var currentIndex = $(this).css('z-index'); 
    alert(currentIndex); 
    var newIndex = currentIndex + 1; 
    alert(newIndex); 
    $(this).css('z-index', newIndex); 
} 
$("#add").on({ 
    click: function(e) { 
     var timestamp = Date.now(); 
     var posx = Math.floor(Math.random() * 400); 
     var posy = Math.floor(Math.random() * 400); 
     $('#container').append(function() { 
      return $('<div class="add_to_this" id="' + timestamp + '" style="left:' + posx + 'px; top:' + posy + 'px; ">Click me, drag a change z-index</div>').click(handler).draggable({ 
       containment: "#container", 
       scroll: false, 
       cursor: 'lock' 
     }); 
    }); 
    } 
});

CSS

在你的代碼個

#container { 
    width:500px; 
    height:500px; 
    background: palegoldenrod; 
    position: relative; 
    top:20px; 
    left: 100px; 
    padding: 0px; 
} 
.add_to_this { 
    padding:5px; 
    background:yellowgreen; 
    position: absolute; 
    display:inline-block; 
    width:200px; 
    height:50px; 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    user-select: none; 
    -o-user-select: none; 
}

來源

2012-10-09 Patrik

兩個問題：

你沒有一個真正的z-index下手，因爲你沒有設置它，所以你必須'auto'
您操作z-index爲字符串，因爲你不分析它

你需要做什麼：

添加在CSS中z-index：z-index:100;
解析z-index：var currentIndex = parseInt($(this).css('z-index'), 10);

DEMONSTRATION（不報警，因爲他們討厭）

來源

2012-10-09 07:11:29

謝謝您的答覆。但是，有解決方案如何解決它？一些例子，或者你可以在jsfiddle的例子中顯示它？因爲我不知道你的意思做... – Patrik

非常感謝你的幫助，你的例子是工作的罰款：] – Patrik

只是爲了好玩我做了一些變化（顏色，光標）。檢查出來;） –

jQuery的 - z-index的操作和自動值，而不是數量

回答

相關問題