JQuery 将一段代码应用于多个元素

JQuery applying one piece of code to multiple elements

本文关键字：应用于 代码 元素 一段 JQuery      更新时间：2023-09-26

我试图将一段代码应用于多个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>

但是，句柄仅附加到其中一个 elementRessizeables，所以我只能调整一个，有没有办法将句柄附加到单独的句柄上，而不必为类使用不同的名称？

在句柄上使用类而不是 id——id 是唯一的！将 id 替换为类，然后将 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'),
        }
    });
});

您那里有多个具有相同 id 的项目，这在 HTML 中是不允许的。ID 应该是唯一的。如果您将 ID 切换到课程，它可能对您有用。

我对jQuery UI的可调整大小不是很熟悉，但是从文档中看起来您不需要提供句柄吗？

相关文章：