jQuery-z索引操作&；自动值代替数字

当您点击

addnew

按钮时，jQuery会将新的

dragrable DIVs

插入到

容器中。当我单击一些
div
时，我想更改
z-index
值。但是jQuery不能将z索引值作为一个数字来获取。它只显示“自动”

。。。是否有解决方案显示真实的z-索引值并将其增加1

JSFIDLE示例-

HTML

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

---

代码中有两个问题：

• 您没有真正的

  z索引

  ，因为您没有设置它，所以您有

  'auto'

• 您将

  z-index

  作为字符串进行操作，因为您不解析它

您需要做的是：

• 在css中添加一个

  z-index

  ：

  z-index:100

• 解析

  z-index

  ：

  var currentIndex=parseInt（$（this）.css（'z-index'），10）

---

（没有警报，因为它们很烦人）

谢谢您的回复。但是，有没有解决办法来解决这个问题呢？例如，或者您可以在JSFIDLE示例中显示它吗？因为我不知道你的意思…非常感谢你的帮助，你的例子很好：]只是为了好玩，我做了一些更改（颜色、光标）。看看吧；）nice:]我正在尝试使用miniColor插件手动更改背景颜色。我解决不了。。。我是jQuery的新手。。。虽然这是可行的，但并不实用。就像重新绘制已经位于顶部的元素一样，z索引不断增加。这意味着您需要将较低的元素拖动更多次才能将其置于顶部。

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

#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;
}