我正在尝试将一段代码应用于多个 div :
$('.elementResizable').resizable({
handles: {
'nw': '#nwgrip',
'sw': '#swgrip',
'se': '#segrip',
'e': '#egrip',
'n': '#ngrip',
's': '#sgrip',
'w': '#wgrip',
}
});
这是 HTML:
<div class='elementResizable' >
<div class="moveHandle glyphicon glyphicon-move" id="testMove"></div>
<input class="test .editable" type="text" id="test" value="Full Name"></input>
<div class="ui-resizable-handle ui-resizable-nw" style="display:none" id="nwgrip"></div>
<div class="ui-resizable-handle ui-resizable-sw" style="display:none" id="swgrip"></div>
<div class="ui-resizable-handle ui-resizable-se" style="display:none" id="segrip"></div>
<div class="ui-resizable-handle ui-resizable-e" style="display:none" id="egrip"></div>
<div class="ui-resizable-handle ui-resizable-n" style="display:none" id="ngrip"></div>
<div class="ui-resizable-handle ui-resizable-s" style="display:none" id="sgrip"></div>
<div class="ui-resizable-handle ui-resizable-w" style="display:none" id="wgrip"></div>
</div>
<div class='elementResizable' >
<div class="moveHandle glyphicon glyphicon-move" id="testMove"></div>
<input class="test .editable" type="text" id="test" value="Full Name"></input>
<div class="ui-resizable-handle ui-resizable-nw" style="display:none" id="nwgrip"></div>
<div class="ui-resizable-handle ui-resizable-sw" style="display:none" id="swgrip"></div>
<div class="ui-resizable-handle ui-resizable-se" style="display:none" id="segrip"></div>
<div class="ui-resizable-handle ui-resizable-e" style="display:none" id="egrip"></div>
<div class="ui-resizable-handle ui-resizable-n" style="display:none" id="ngrip"></div>
<div class="ui-resizable-handle ui-resizable-s" style="display:none" id="sgrip"></div>
<div class="ui-resizable-handle ui-resizable-w" style="display:none" id="wgrip"></div>
</div>
但是,句柄仅附加到一个 elementResabilized,因此我只能调整一个元素的大小,有没有办法将句柄附加到单独的句柄,而不必为类使用不同的名称?
最佳答案
在句柄上使用类而不是 ID——ID 是唯一的!将 ids 替换为类,然后将 JavaScript 中的选择器更改为 .nwgrip
、.swgrip
等。然后使用 .find 将其限制为子元素
和 .each
:
$('.elementResizable').each(function () {
$(this).resizable({
handles: {
'nw': $(this).find('.nwgrip'),
'sw': $(this).find('.swgrip'),
'se': $(this).find('.segrip'),
'e': $(this).find('.egrip'),
'n': $(this).find('.ngrip'),
's': $(this).find('.sgrip'),
'w': $(this).find('.wgrip'),
}
});
});
关于javascript - JQuery 将一段代码应用于多个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27495510/