Question

我希望在点击时动态调整元素大小，并且能够在第二次单击时恢复到原始大小。我认为toggleClass可以完成这项工作，但显然它没有：

$(document).ready(function() {
 $(this).click(function() {
  var new_size = // dynamically calculated value;
  $('.resize').css({'width': new_size, 'height': new_size});
  $(this).toggleClass('resize');
 });
});

有一种简单的方法可以解决这个问题吗？

Answer 1

这行代码：

$('.resize').css({'width': new_size, 'height': new_size});

没有做你想象的那样。要使对象在添加类时更改大小，您需要一个指定.resize类的实际CSS规则，该规则不适用于动态计算的大小。

这行代码只是在.resize类的任何对象上设置高度和宽度，并且没有对没有该类的对象做任何事情。因此，您可以调整对象的大小一次（当它有类时）并且永远不会再次更改它的大小。它不会切换任何东西。

我建议您保存旧尺寸，然后可以在需要时恢复它并保存切换值。 jQuery的.data（）函数可以很好地保存这种类型的信息：

$(document).ready(function() {
    $(this).click(function() {
        var this$ = $(this);
        // if it's currently at the dynamic size, restore the original size
        if (this$.data("dynamicallySized")) {
            $(this.css(this$.data("origSize"))
               .data("dynamicallySized", false);   // set flag that we're not dynamic
        } else {
            // save original size
            this$.data("origSize", {height: this$.height(), width: this$.width()})
              .css(new_size)
              .data(dynamicallySized", true);    // set flag that we're dynamically sized
        }
    });
});

Answer 2

你可以使用jQuery.data（）来存储旧值，准备在下次点击时重新申请

$(document).ready(function() {
 $(this).click(function() {
  if($(this).data("old")){
    var old = $(this).data("old");
    $(this).css({'width': old, 'height': old});
    //clear out the old_size data so it won't execute this next time
    $(this).removeData("old");
  } else {
    var old = $(this).height();
    var new_size = // dynamically calculated value
    $(this).data("old", old);
    $(this).css({'width': new_size, 'height': new_size});    
  }
 });
});

如何激活/停用动态调整大小元素

2 个答案: