jQuery ui resizable 传递resize事件的变量来停止事件

Question

我需要传递 resize 事件的变量“blabla”来停止事件我该怎么做？

提前感谢这里的一部分代码来解释我需要什么：

.resizable({
                        disabled: disablePoignee,
                        handles: poignees,
                        resize: function (e, ui) {
                            var blabla = "pioup";
                        },
                        stop:function(e,ui){
                            //try to get blabla
                        }});

提前感谢您的帮助

Answer 1

在这段代码中...

.resizable({
  disabled: disablePoignee,
  handles: poignees,
  resize: function (e, ui) {
    var blabla = "pioup";
  },
  stop: function(e,ui) {
    //try to get blabla
  }});

... 变量blabla 仅在传递给resizable 插件函数的函数内部可用（作为options 对象的resize 属性）。这个值是封装的 - 基本上是隐藏的 - 对世界其他地方来说。

要“取消隐藏”它，您有两种选择。首先，使这个变量在resize 和stop 函数的范围之外：

var blabla; // or const, or let
// ...
.resizable({
  resize: function (e, ui) {
    blabla = "pioup"; // note that `var` shouldn't be used here, as existing variable is reused
  },
  stop: function(e, ui) {
    doSomethingWith(blabla);
  }});

但是，如果在您的代码中创建了多个 resizable 实例，并且每个实例都应使用其自己的 blabla 值，则该方法将不起作用。在这种情况下，使用第二个选项可能会很有用 - 并将一些自定义属性分配给托管插件的 jQuery 对象：

.resizable({
  resize: function (e, ui) {
    ui.originalElement.data('blabla', 'someValue'); 
  },
  stop: function(e, ui) {
    doSomethingWith(ui.originalElement.data('blabla')); 
  }});

这种方法的好处是，即使插件被销毁，数据仍会附加到该对象上。

Answer 2

考虑以下示例。

$(function() {
  $("#resizable").resizable({
    resize: function(e, ui) {
      $(this).data("foo", "bar-" + $(this).width());
    },
    stop: function(e, ui) {
      console.log($(this).data("foo"));
    }
  });
});

#resizable {
  width: 150px;
  height: 150px;
  padding: 0.5em;
}

#resizable h3 {
  text-align: center;
  margin: 0;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">Resizable</h3>
</div>

您可以使用jQuery Data，而不是创建更全局的变量。

存储与匹配元素关联的任意数据，或在命名数据存储中返回匹配元素集中第一个元素的值。

有了这个，我们可以设置和获取每个元素的数据。如果您只有一个可调整大小的元素，这没什么大不了的。如果您有许多可调整大小的项目，这对于合并您的脚本非常有帮助。