适配动态SectionId的JavaScript资源上下排序函数改造需求

核心问题 #

现有排序函数会全局搜索所有Section下的资源，导致动态添加的多个Section之间的排序逻辑互相干扰，必须让函数只在当前操作的Section范围内执行排序。

改造后的代码 #

function fnUpOrderCustomResource(order, sectionId) {
    // 限定在当前Section内获取资源总数
    var sectionResources = $("#" + sectionId + " .frmResources");
    var orderLength = sectionResources.length;

    if (order === 1) {
        swal("", "You are at first position, you can not move up!", "warning");
        return false;
    }

    var currOrder = order;
    var upOrder = order - 1;

    // 仅在当前Section内查找元素
    var currElement = $("#" + sectionId + " .frmResources[data-order='" + currOrder + "']");
    var upElement = $("#" + sectionId + " .frmResources[data-order='" + upOrder + "']");

    // 更新元素的order属性和data-order值
    currElement.css("order", upOrder).attr("data-order", upOrder);
    upElement.css("order", currOrder).attr("data-order", currOrder);

    // 更新箭头的点击事件，传入当前SectionId和新的order值
    currElement.find(".uparrow").attr("onclick", `fnUpOrderCustomResource(${upOrder}, '${sectionId}')`);
    currElement.find(".downarrow").attr("onclick", `fnDownOrderCustomResource(${upOrder}, '${sectionId}')`);
    
    upElement.find(".uparrow").attr("onclick", `fnUpOrderCustomResource(${currOrder}, '${sectionId}')`);
    upElement.find(".downarrow").attr("onclick", `fnDownOrderCustomResource(${currOrder}, '${sectionId}')`);
}

function fnDownOrderCustomResource(order, sectionId) {
    // 限定在当前Section内获取资源总数
    var sectionResources = $("#" + sectionId + " .frmResources");
    var orderLength = sectionResources.length;

    if (order === orderLength) {
        swal("", "You are at last position, you can not move down!", "warning");
        return false;
    }

    var currOrder = order;
    var downOrder = order + 1;

    // 仅在当前Section内查找元素
    var currElement = $("#" + sectionId + " .frmResources[data-order='" + currOrder + "']");
    var downElement = $("#" + sectionId + " .frmResources[data-order='" + downOrder + "']");

    // 更新元素的order属性和data-order值
    currElement.css("order", downOrder).attr("data-order", downOrder);
    downElement.css("order", currOrder).attr("data-order", currOrder);

    // 更新箭头的点击事件，传入当前SectionId和新的order值
    currElement.find(".uparrow").attr("onclick", `fnUpOrderCustomResource(${downOrder}, '${sectionId}')`);
    currElement.find(".downarrow").attr("onclick", `fnDownOrderCustomResource(${downOrder}, '${sectionId}')`);
    
    downElement.find(".uparrow").attr("onclick", `fnUpOrderCustomResource(${currOrder}, '${sectionId}')`);
    downElement.find(".downarrow").attr("onclick", `fnDownOrderCustomResource(${currOrder}, '${sectionId}')`);
}

关键改动说明 #

• 新增sectionId参数：两个函数都添加sectionId参数，用来定位当前操作的Section，确保所有DOM操作都只在该Section内进行。
• 限定选择器范围：把原来的.CustomResource .frmResources改为$("#" + sectionId + " .frmResources")，避免跨Section查找元素。
• 计算当前Section的资源总数：获取order长度时只统计当前Section内的资源，而非全局所有资源。
• 更新箭头点击事件：修改onclick属性，调用函数时同时传入新的order值和当前SectionId，保证后续操作仍在同一Section内执行。

使用注意 #

动态生成Section和资源时，需要给每个箭头的onclick事件传入对应的SectionId（比如SectionId_1）和初始order值，示例：

<!-- 假设当前Section的ID是SectionId_1，资源的order是2 -->
<button class="uparrow" onclick="fnUpOrderCustomResource(2, 'SectionId_1')">↑</button>
<button class="downarrow" onclick="fnDownOrderCustomResource(2, 'SectionId_1')">↓</button>

内容的提问来源于stack exchange，提问作者Shraddha Singh