Question

我正在尝试使用jQuery .toggle（）使单击的图像变大，然后在第二次单击时返回其原始状态（单击之前）。

我有由packery.js排列的图像，因此每个图像都有一个动态生成的“绝对”内联样式。我想抓取，存储，然后将这些值传递给第二个切换功能以重新应用到图像，因此它“恢复”到其原始样式并放置在Packery容器中。这是我现在的代码：

但是当第二次点击发生时，似乎是更新“thisStyle”以获得img的样式，当它在较大的尺寸时使用“item-big”的新类和样式（在第一次点击之后）。 / p>

有没有办法“冻结”或存储“thisStyle”/this.style（拍摄快照）的值，以便稍后在第二个切换功能中重复使用？

额外信息-----------

this.style抓取'item'的自定义内联样式，在一个案例中如下所示：

var thisStyle;

    $("img").click().toggle(
        function() {
            thisStyle = this.style;
            $(this).removeClass('item').addClass('item-big').center();},          
        function() {
            $(this).removeClass('item-big').addClass('item').css({ thisStyle });
        }
        );

this.style将该样式信息作为Object返回。同样，问题是当在第二个切换函数中使用时，分配给的变量似乎更新。

.center（）是一个自定义的jQuery函数，它在第一次单击/切换功能上进行一些数学处理以使较大的图像居中：

style="position: absolute; left: 10px; top: 10px;"

Answer 1

使用版本1.11.13

似乎在问题中使用已弃用的版本.toggle()？见

.toggle()，Has .toggle() been deprecated in the latest jQuery releases?。

尝试使用.css() thisStyle = $(this).css(["position", "left", "top"]);

var thisStyle;
$("img").click(
    function() {
      thisStyle = $(this).css(["position", "left", "top"]);
      console.log(thisStyle);          
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="http://lorempixel.com/100/100/cats" class="item" style="position: absolute; left: 10px; top: 10px;" />

使用JQuery Toggle设置和检索变量

1 个答案: