无需编写多个函数即可调整多个 div 的大小

Question

对于我的项目，我需要多个 DIV（一个在一个下面），其中所有都可以调整大小。我使用 resizable jquery 来调整大小。但似乎只有一个 DIV 可以使用一个可调整大小的函数激活（在 jquery 中）。我尝试为 2 DIVs 使用两个可调整大小的函数，然后它起作用了。那么有什么方法可以调整多个 DIV 的大小而不必重写可调整大小的函数。这是我的 javascript 可调整大小的函数

$(function() {
  $( "#resizeDiv" ).resizable();
});

这是我的 html:

<div id="resizeDiv" class="ui-widget-content">                  
  <h3 class="ui-widget-header">Report 1</h3>
</div>

Answer 1

您可以向所有要调整大小的选择器添加新的 class，也可以在 jquery

中添加多个选择器

$(function() {
  $( "#resizeDiv, #resizeDivtwo, #resizeDivthree" ).resizable();
});

Answer 2

https://jsfiddle.net/hu63rbxc/

<div class="resize"></div>
<div class="resize"></div>
<div class="resize"></div>
<div class="resize"></div>

Javascript

$( ".resize" ).resizable();

Answer 3

因此有两个选择器，即 id 和 class。您已将 id 分配给 div，因此您一次只能访问一个 div。对于多个 div，您需要将任何公共 class 分配给所有 div。

<div id="resizeDiv" class="ui-widget-content">                  
  <h3 class="ui-widget-header">Report 1</h3>
</div> 
<div id="resizeDiv2" class="ui-widget-content">                  
  <h3 class="ui-widget-header">Report 2</h3>
</div> 
<div id="resizeDiv3" class="ui-widget-content">                  
  <h3 class="ui-widget-header">Report 3</h3>
</div>

和jQuery

$(function() {
  $( ".ui-widget-content" ).resizable();
});

无需编写多个函数即可调整多个 div 的大小

To resize multiple div without having to write multiple functions

html

jquery

resizable