Question

我正在为一个工具栏写一个jQuery插件，里面有几个按钮。我需要这个工具栏在悬停时为其调用的每个元素进行淡入淡出，例如页面上的多个项目容器在悬停时都显示相同的工具栏。

这看起来很容易，但我需要使用基于当前用户的一组数据填充所有工具栏。如果我只是在所有项容器中实例化插件，我将不得不在用户数据库中为页面上的每个元素ajax（可能是100）。

我不想在每次实例化插件时都记录这些数据。

我的问题是，存储所有工具栏要访问的数据的最佳位置在哪里，或者我认为这是错误的方法？我应该使用用户数据创建一个全局工具栏，将其保存到DOM并将其移动到悬停项目？或者只是在点击按钮时将数据附加到工具栏上，以便在需要时将数据放入其中？

编辑：我从数据库返回的数据（存储桶ID用于存储商品信息）：

{ 'bucket0' : '0', 'bucket1' : '1', 'bucket2' : '2' }

项目页面的HTML：

<div class="items-container">
    <div class="item" id="item0">
         <div class="item-toolbar" id="item-toolbar-item0">
              <ul class="item-action save">
                  <li id="0">bucket0</li>
                  <li id="1">bucket1></li>
                  <li id="2">bucket2></li>
              </ul>
         </div>
    </div>
    <div class="item" id="item1">
        <div class="item-toolbar" id="item-toolbar-item1">...</div>
    </div>
    <div class="item" id="item2">
        <div class="item-toolbar" id="item-toolbar-item2">...</div>
    </div>
</div>

Answer 1

如果所有项目都具有相同的父项，那么您可以使用jQuery的.data()将数据存储在父项中，如下所示：

// in some event handler context
var self = $(this);
var parent = self.parent();
var toolbar = parent.data("toolbar");
if (!toolbar) {
    // get data via ajax so you can create the toolbar
    // in the success handler, set the data with so other items can find it:
    // parent.data("toolbar", theToolbar);
}

仅供参考，我经常更喜欢使用.closest(selector)而不是.parent()，因为如果为了格式化原因而使用额外级别修改div结构，它会稍微不那么脆弱。但是，由于您没有包含相关的HTML，我不知道.closest()将使用哪个选择器。

如何在jquery插件中跨多个元素使用相同的数据？

1 个答案: