Question

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

我在data-parent上添加了两个数据属性data-sub和<li>。

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

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

取消对孩子的父项设置，会将父项和孩子的data-parent和data-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>

在上面的代码中，

MenuName1 -data-sub="1"（由于有孩子）
MenuName2 -data-parent="1"（ 1 是父级的data-id，在这种情况1）

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

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

如何访问父母和孩子的数据属性以对其进行操作？

Answer 1

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

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

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

使用变更事件时的JQuery访问多个Elements数据属性

1 个答案: