选择先前单击的元素

Question

我需要帮助来选择以前点击的元素..（我找不到答案）我的功能如下：

showSticker:function(){
    $(".Sticker").click(    
        function () {
            if ($(this).hasClass("StickerShow"))
                $(this).removeClass('StickerShow')
            else {
                $(".Sticker").removeClass('StickerShow'); // Here is a problem
                $(this).addClass('StickerShow');
            }
        }
    );
}

实际上它工作得很好，但我发现从所有匹配的元素中删除类非常愚蠢，我注意到 CPU 很难渲染它。

Answer 1

你可以缓存一些东西，而不是不必要地遍历 DOM：

var $stickers = $('.Sticker');

// ...

showSticker: function() {
    $stickers.click(function() {
        var $this = $(this);

        if ($this.hasClass("StickerShow")) {
            $this.removeClass('StickerShow')
        } else {
            $stickers.removeClass('StickerShow'); // Here is a problem
            $this.addClass('StickerShow');
        }
    });
}

Answer 2

似乎你想要这样：

showSticker:function(){
    var Stickers=$(".Sticker");
    var lastSticker=Stickers.first();
    Stickers.click(    
        function () {
            $this=$(this);
            if ($this.hasClass("StickerShow"))
                $this.removeClass('StickerShow')
            else {
            // Not worry about removeClass from element which has no such class
                lastSticker.removeClass('StickerShow');
                $this.addClass('StickerShow');
                lastSticker=$this;
            }

        }
    );
}

如果贴纸是兄弟，您可以使用简单的$this.siblings('.StickerShow').removeClass('StickerShow') 和$this.toggleClass('StickerShow') 而不是if/else