jQuery删除/添加CSS类

Question

jQuery删除/添加CSS类

4

有5个瓷砖，如果我点击其中一个，它会打开（宽度为100％），当我点击右上角的X时，它会关闭，这很好。但是当它被打开并且我再次点击蓝色框时，它将覆盖全局变量，并且onclick Close不再知道旧位置。

这里是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;
}

Jquery

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

});

- Jan Ackermann

抱歉，我忘记了示例代码，现在已经包含在内了。 - Jan Ackermann

所以你想要的是，当点击X时，它必须返回到同一位置？ - Muath

是的，它已经这样做了。问题是当您再次单击打开的蓝色框时，它不会返回到原始位置。 - Jan Ackermann

点击一个带公交车的蓝色框，然后它会打开。然后再次点击打开的东西。然后用 X 关闭它，这样就会出现错误。希望你能理解。 - Jan Ackermann

4个回答

1

在你的示例中，需要执行以下操作：

1.通过正确删除“tile_open”来恢复类名值

2.使用“offset()”函数检索顶部位置

http://jsfiddle.net/2jnM2/

var posL , posT;

$(".tile").on("click", function (e) { 
    var pos= $(this).position();
         posL = $(this).css('left'),
         //posT = $(this).css('top');
             posT = $(this).offset().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').removeClass('tile_open').addClass('tile');//<-- This was my try to get it to work

});

- melc

这对我不起作用，也许你没有理解我的意思。 - Jan Ackermann

1

您的脚本的主要问题是，当您点击蓝色图像时，它会设置原始位置，这很好。但是，如果您在其变大后再次单击它，则会再次设置它，那就是错误的。 这是错误的，因为您在检查div是否已经全屏之前，将位置存储在那些变量中。演示因此，您必须更改以下内容：

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

e.stopPropagation();
if(!$(this).hasClass('open') ) {

对于这个

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

这只是主要问题。当它占满整页时，您还需要增加元素的z-index，并在返回原始状态时减少其值，否则它将保持在其他蓝色div下面。请查看我的演示。在我的演示中，我也将margin:0 应用于 body （仅为了在动画中更加精确），并使用了这个。

var pos= $(this).offset();
     posL = pos.left,
     posT = pos.top;

代替这个。

var pos= $(this).position();
     posL = $(this).css('left'),
     posT = $(this).css('top');

再来说得更准确一些。(我不知道你的页面完整结构和 offset，它更好，因为 offset 元素相对于文档的位置)

- Kevin Cittadini

1

谢谢，工作完美，你甚至修复了我没有要求的错误。感谢你的工作。 - Jan Ackermann

0

你可以尝试在每张图像上存储位置数据，然后稍后从该图像检索它：

    $(".tile").on("click", function (e) { 
    var $this = $(this),
        pos = $this.position();

    $this.data({
        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')

    }

});



$(".close").on("click", function (e) {
    var $parent = $(this).parent();
    e.stopPropagation();
    $parent.stop().animate({
        "left" : $parent.data('posL'),
        "top" : $parent.data('posT'),
        "width": "100px",
        "height": "50px"
    }, 1000).removeClass('open');


});

代码片段

- adamdama

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nemesis02 · Accepted Answer

您的问题是变量作用域。当您点击第一张图片时，它打开并存储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);
    }


});