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

Posted 2023-05-08

【中文标题】jQuery ui resizable 传递resize事件的变量来停止事件

【英文标题】：jQuery ui resizable Pass variables of resize event to stop event

【发布时间】：2021-09-17 06:18:02

【问题描述】：

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

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

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

提前感谢您的帮助

【问题讨论】：

您需要帮助我们帮助您。你能分享更多信息吗？

@RuiCosta 我只是想将变量 blabla 传递给停止函数，我该如何更好地解释？

你能分享你剩下的代码吗？

【参考方案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')); 
  );

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

【讨论】：

旁注：这也可以使用.data() 来完成。这意味着可以使用.data() 将变量添加到元素中，然后以相同的方式调用。如果你有超过 1 个元素在玩，这很有帮助。

您的意思是在我的回答中使用的其他方式？

@raina77ow 感谢您的回复，我最初使用过这个，但我认为和/或我希望有一个干净的可能性避免通过 dom。

@raina77ow 我正在查看您答案的第一部分，但没有看到第二部分。

【参考方案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，而不是创建更全局的变量。

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

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

【讨论】：

感谢您的回复，我最初使用过这个，但我认为和/或我希望有一个干净的可能性避免通过 dom。