Question

请帮我逻辑一下。假设我有3张卡在另一张之上。我想写一个逻辑，当用户点击卡时，它的位置应该从3变为第二张卡。这意味着如果它在顶部，它应该到第二个位置。如果在底部应该到第二个位置。如果在第二个位置已经没有任何事情发生请帮助使用javascript（最好）。感谢。

这是我的代码：

$('.close1').unbind('click').bind('click', function (e) {
    e.stopPropagation();
    $('.pop').each(function (key, value) {
        $(this).css('z-index', (key + 1) * 2);
    });
    if ($(this).parent().attr('data-z-index') == 1) {
        $(this).parent().css('z-index', 5);
    } else {
        $(this).parent().css('z-index', 3);
    }
});

Answer 1

所以我把这作为一个小挑战，并决定从头开始。这是一个工作演示。 Demo

<强>码

HTML 的

<div id="container">
    <div data-pos="0" class="card" id="c1">card 1</div>
    <div data-pos="1" class="card" id="c2">card 2</div>
    <div data-pos="2" class="card" id="c3">card 3</div>
</div>

CSS

#c1 {
    background-color: red;
}
#c2 {
    background-color: blue;
}
#c3 {
    background-color: green;
}
.card {
    width: 100px;
    height: 100px;
    position: absolute;
}

的Javascript

var position = [{
    left: 100,
    top: 100
}, //if zindex = 0
{
    left: 110,
    top: 110
}, //if zindex = 1
{
    left: 120,
    top: 120
} // if zindex = 2
];

var $container = $('#container');
//initial set up
(function () {
    $('.card').each(function (index, value) {
        var $value = $(value);
        var z = $value.data('pos');
        $value.css('z-index', z);
        $value.offset(position[z]);
    });
})()
var switchHandler = function ($cardA, $cardB) {
    var z1 = $cardA.css('z-index');
    var z2 = $cardB.css('z-index');
    $cardA.attr('data-pos', z2);
    $cardA.css('z-index', z2);
    $cardB.attr('data-pos', z1);
    $cardB.css('z-index', z1);
    $cardA.offset(position[z2]);
    $cardB.offset(position[z1]);
}

$('.card').on('click', function () {
    var $this = $(this),
        z = $this.css('z-index');
    switch (true) {
        case z == 0 || z == 2:
            switchHandler($this, $container.find('[data-pos="1"]'));
            break;
        case z == 1:
            console.log('Position two.. not doing anything');
            break;
        default:
            console.log('An error occured');
    }
});

永远放在第二位

1 个答案: