Jquery 删除/添加 CSS 类

Question

有 5 个图 block ，如果我单击其中一个，它会打开它们(宽度 100%)，当我单击右上角的 X 时，它会关闭它，效果很好。但是当它打开并且我再次单击蓝色框时，它将覆盖全局变量并且 onclick Close 不再知道旧位置。

在这里 fiddle FIDDLE

HTML

<div class="tile" id="tp1">
    <img class="bus" src="http://s14.directupload.net/images/131130/4gzq9oaz.png" />
    <div class="close">x</div>
</div>

CSS

.tile, .tile_open {
    position: absolute;
    background-color:#0090db;
}

/*//////////////////////////////////////
        Tile Width And Location eddid here
///////////////////////////////////////*/
#tp1{
    width: 100px;
    height: 50px;       
}
/*//////////////////////////////////////
                IMG SIZE
///////////////////////////////////////*/
img {
    width: 100%;
    height: 100%;
}

/*//////////////////////////////////////
           Close Button
///////////////////////////////////////*/
.close {
    display: none;
    background-color:#C85051;
    position: absolute;
    top: 0;
    right: 5px;
    width: 50px;
    height: 25px;
    text-align: center;
}

.open .close {
    display: block;
}

查询

var posL , posT;

$(".tile").on("click", function (e) { 
    var pos= $(this).position();
         posL = $(this).css('left'),
         posT = $(this).css('top');

    e.stopPropagation();
    if(!$(this).hasClass('open') ) {
        $(this).animate({
            "top": pos.top - pos.top,
            "left":pos.left - pos.left,
            "width": "100%",
            "height": "100%"
        }, 1000).addClass('open')
        $(this).removeClass('tile').addClass('tile_open'); //<-- This was my try to get it to work
    }


});



$(".close").on("click", function (e) {
    e.stopPropagation();
    $(this).parent().stop().animate({
        "left" : posL,
        "top" : posT,
        "width": "100px",
        "height": "50px"
    }, 1000).removeClass('open')
    $(this).removeClass('tile_open').addClass('tile');//<-- This was my try to get it to work

});

Answer 1

你的问题是范围。当您单击第一张图片时，它会打开并存储 x、y，但是当您单击下一张图片时，它会覆盖之前的 x、y 坐标，因此您需要更改值的范围。

这是您的 JS 正确作用域的示例。 http://jsfiddle.net/Nemesis02/2Zx3m/23/

$(".tile").on("click", function (e) { 
    var pos= $(this).position(),
        posL = $(this).css('left'), posT = $(this).css('top');

    var closeFunction = function (e) {
        e.stopPropagation();
        $(this).parent().stop().animate({
            "left" : posL,
            "top" : posT,
            "width": "100px",
            "height": "50px"
        }, 1000).removeClass('open')
        $(this).removeClass('tile_open').addClass('tile');//<-- This was my try to get it to work
        $(this).unbind('close', closeFunction)
    };

    e.stopPropagation();
    if(!$(this).hasClass('open') ) {
        $(this).animate({
            "top": pos.top - pos.top,
            "left":pos.left - pos.left,
            "width": "100%",
            "height": "100%"
        }, 1000).addClass('open')
        $(this).removeClass('tile').addClass('tile_open'); //<-- This was my try to get it to work
        $(this).find(".close").on("click", closeFunction);
    }


});