Question

我不确定如何解决这个问题。我有一个我正在开发的功能，它将使用几个不同的特性，并且在这个阶段只有它的开头。

我的目标是将4个不同的盒子叠放在一起，有点像标签。我有它，所以我可以选择其中一个框，它来到前面，但我希望能够相应地更改其余3个框的类，以便它们整齐地堆叠。

的JavaScript ：

<script>
    $(document).ready(function () {
        $('#sites div').click(function () {
            $('.topZ-index').removeClass('topZ-index');
            $(this).addClass('topZ-index');
        });
    });
</script>

HTML ：

<div id="sites">
    <div id="layer1" class="layer1"></div>
    <div id="layer2" class="layer2"></div>
    <div id="layer3" class="layer3"></div>
    <div id="layer4" class="layer4"></div>
</div>

这就是我到目前为止所做的事情，每个div都有一个margin-top和margin-left off，它与重叠的那个居中。

我看到很多在两个项目之间切换的例子，但这涉及4个不同的层

我知道我最终会想要使用缓动和计时器文件以及其他一些文件将所选框平滑地滑动到前面，并为非选定项添加轻微的淡入淡出。我不知道在这个开始阶段有多少轴承。

此时，我只需要正确堆叠的方框。

我的目标是在视觉上获得类似于将牌从牌组中拉出并将其放在顶部的效果。看来，我可能还需要更改id，但我不确定jquery中有多可能。

在任何情况下使用firebug，这是我选择一个框后html需要的样子。

<div id="sites">
    <div id="layer1" class="layer1"></div>
    <div id="layer4" class="layer2 topZ-index"></div>
    <div id="layer2" class="layer3"></div>
    <div id="layer3" class="layer4"></div>
</div>

Answer 1

这假设您有zindex1到zindex4类，它们实现了堆叠顺序。

$(document).ready(function() {
    $('#sites div').click(function() {
        $('#sites div').removeClass('zindex1 zindex2 zindex3 zindex4');
        $(this).addClass('zindex1');
        var index = 2;
        var top = $(this).attr('id');
        $('#sites div').each(function() {
            if ($(this).attr('id') != top) {
                $(this).addClass("zindex" + index);
                index++;
            }
        });
    });
});

查看我的FIDDLE

Answer 2

您可以通过操纵z-index来完成此操作。例如：

 $('#sites div').click(function () {

     var max_zindex = 0;

     $('.layer').each(function() {
            var zindex =  parseInt($(this).css("z-index"), 10);
         if(zindex > max_zindex) 
            max_zindex = zindex;                     
     });
     max_zindex++; 
    $(this).css('z-index', max_zindex);
  });

点击此处工作演示：http://jsfiddle.net/viralpatel/h3WaL/2/

jquery更改多个类以影响z-index和其他属性

2 个答案: