时间戳

首页 > 解决方案 > 使用 JQuery On Change 事件访问多个元素数据属性

javascript - 使用 JQuery On Change 事件访问多个元素数据属性

问题描述

我正在尝试创建一种重新排列菜单项的方法。我正在使用这个 Github 库：https ://github.com/ShinDarth/Nestable

我添加了两个数据属性data-parent和data-sub我的<li>.

我试图在重新排列项目时更新这些属性。

因此，如果将项目作为子项放置，则其数据属性 ,data-parent将是data-id其父项的 。对此进行扩展，父项自己的data-sub将变为 true or 1，这意味着它具有子项。

取消养育孩子，会将父母和孩子的data-parentanddata-sub设置为 0。因为两者都没有子对象或父母。

例子：

拿这两个项目。请注意data-parent和data-sub都设置为零。

<div class="dd nestable">
    <ol class="dd-list">
    <li class="dd-item" data-id="1" data-name="MenuName1"  data-sub="0" data-parent="0" data-new="0" data-deleted="0">
        <div class="dd-handle">MenuName1</div>
    </li>

    <li class="dd-item" data-id="2" data-name="MenuName2"  data-sub="0" data-parent="0" data-new="0" data-deleted="0">
        <div class="dd-handle">MenuName</div>
    </li>
    </ol>
</div>

使用Nestable库MenuName2作为子级移动MenuName1会导致以下结果。

<div class="dd nestable">
    <ol class="dd-list">
    <li class="dd-item" data-id="1" data-name="MenuName1" data-sub="1" data-parent="0" data-new="0" data-deleted="0">
     <div class="dd-handle">MenuName1</div>
      <ol class="dd-list">
       <li class="dd-item" data-id="2" data-name="MenuName2" data-sub="0" data-parent="1" data-new="0" data-deleted="0">
        <div class="dd-handle">MenuName</div>
       </li>
      </ol>
    </li>
    </ol>
</div>

在上面的代码中，

我认为该onChange()活动将是更新的好地方。但我似乎无法访问任何数据元素。

$('.dd').on('change', function (e) {
   /* on change event */
  var target = $(e.target);
  console.log("reordered " + JSON.stringify(e));
});

如何访问父母和孩子的数据属性来操作它们？

标签： javascriptjquery

解决方案

根据github网站示例，您应该使用

$('.dd.nestable').on('change', .... )

这可能是您的解决方案吗？

推荐阅读