Question

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

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

这是我的HTML：

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

Answer 1

https://jsfiddle.net/hu63rbxc/

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

的Javascript

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

Answer 2

因此有两个选择器，即id和class。您已将id分配给div，因此您一次只能访问一个div。对于多个div，您需要为所有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();
});

Answer 3

您可以为要调整大小的所有类添加新类，也可以在jquery中添加多个选择器

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

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

3 个答案: