javascript - 单击 + CTRL 键选择一行，然后将 CSS 类添加到其下面的所有行，直到使用 JavaScript 找到具有另一个 CSS 类的行

Question

我有一个 JavaScript 应用程序，其中包含项目任务记录，允许您拖放以重新定位排序顺序。

这是一篇包含代码和演示的详细帖子。我的问题在底部...

还有第二种类型的任务记录，它充当虚拟任务列表标题，以便您可以在任务之间拖放列表标题记录，以分隔和创建更有条理的任务列表。

此屏幕截图显示了一些点击和拖放功能，其中包括:

• 单击任务行拖动 handle 会将 .selected CSS 类添加到该行，该类会更改背景颜色以显示其已“选定”。选择任务行后，您还可以单击并按住拖动 handle ，同时将行垂直拖动到新位置。
• 按住 CTRL 键盘键并单击任务行拖动 handle 可以选择多行。选择多于 1 行后，您可以单击多行并将其拖放到新的排序顺序位置。
• 选择 1 行或多行后，单击任何其他拖动 handle 将取消选择所有行，然后选择您单击的行。除非您按住 CTRL 键来执行多选功能。
• 通过拖动 Tsk 标题行或任何相关行，您可以组织创建任务列表的顺序

<小时/>

演示 http://jsfiddle.net/jasondavis/xhmb2ba1/

<小时/>

<小时/>

JavaScript - 添加拖放 + 单击以选择多行

// Handle Project Task Drag and Drop Sorting on Task Edit Screen.
$("#project_tasks").on('click', '.handle', function (e) {
    if (e.ctrlKey || e.metaKey) {
        $(this).parent().toggleClass("selected");
    } else {
        $(this).parent().addClass("selected").siblings().removeClass('selected');
    }
}).sortable({
    handle: '.handle',
    placeholder: 'ui-state-highlight',
    delay: 150, //Needed to prevent accidental drag when trying to select
    revert: 0,
    helper: function (e, item) {
        var helper = $('<div/>');
        if (!item.hasClass('selected')) {
            item.addClass('selected').siblings().removeClass('selected');
        }
        var elements = item.parent().children('.selected').clone();
        item.data('multidrag', elements).siblings('.selected').remove();
        return helper.append(elements);
    },
    stop: function (e, info) {
        info.item.after(info.item.data('multidrag')).remove();
        $('.selected').removeClass('selected');
        updateSortOrderNumbers();
    }
});

function updateSortOrderNumbers(){
  showTaskUnSavedChangesHeaderBar();
  jQuery('.sortable div.task_row').each(function(idx) {
    var inputField = jQuery(this).find("[id^='sort_order']");
    jQuery(inputField).val(idx+1);
  });
}

HTML 结构

<div id="project_tasks" class="tasks_block sortable list ui-sortable" style="display: block;">

    <!-- TASK HEADING ROW -->
    <div id="task_11" class="heading-row task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_11" id="sort_order_11" class="sort_order" size="15" type="hidden" value="1">
        <input name="heading_11" id="heading_11" class="heading" size="15" type="hidden" value="1">
        <input name="name_11" id="name_11" class="task-heading name" size="45" type="text" value="List Heading 1" placeholder="Type a Project Task List Heading Here..." style="cursor: auto; ">
         <br style="clear:both;">
    </div>

    <div id="task_12" class="task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_12" id="sort_order_12" class="sort_order" size="15" type="hidden" value="2">
        <div class="task-name-wrap">
            <input class="name" name="name_12" id="name_12" placeholder="Name:" size="45" type="text" value="Task record 2">
        </div>
        <br style="clear:both;">
    </div>

    <div id="task_12" class="task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_12" id="sort_order_12" class="sort_order" size="15" type="hidden" value="2">
        <div class="task-name-wrap">
            <input class="name" name="name_12" id="name_12" placeholder="Name:" size="45" type="text" value="Task record 3">
        </div>
        <br style="clear:both;">
    </div>

    <!-- TASK HEADING ROW -->
    <div id="task_11" class="heading-row task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_11" id="sort_order_11" class="sort_order" size="15" type="hidden" value="1">
        <input name="heading_11" id="heading_11" class="heading" size="15" type="hidden" value="1">
        <input name="name_11" id="name_11" class="task-heading name" size="45" type="text" value="List Heading 2" placeholder="Type a Project Task List Heading Here..." style="cursor: auto; ">
         <br style="clear:both;">
    </div>


    <div id="task_12" class="task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_12" id="sort_order_12" class="sort_order" size="15" type="hidden" value="2">
        <div class="task-name-wrap">
            <input class="name" name="name_12" id="name_12" placeholder="Name:" size="45" type="text" value="Task record 6">
        </div>
    </div>

    <div id="task_12" class="task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_12" id="sort_order_12" class="sort_order" size="15" type="hidden" value="2">
        <div class="task-name-wrap">
            <input class="name" name="name_12" id="name_12" placeholder="Name:" size="45" type="text" value="Task record 7">
        </div>
    </div>


</div>

<小时/>

问题:新增“单击以选择任务列表中的所有任务”功能:

我想要做的是在任务标题行拖动选择器图像上添加 CTRL + Click 功能，并将其“选择”(添加 .select CSS 类)到所有任务行位于该任务标题行下方但下一个任务标题之前。

由于任务标题行与常规任务记录没有什么不同，因此没有父/子层次结构，因此事情变得复杂。上面的 HTML 显示有 2 个任务标题行。第一和第四。

因此，在第一个 Tash 标题行上 CTRL+Click 需要将 CSS 类 selected 添加到第 1、2 和 3 行，以选择任务标题行以及它的 2 个“子”行。

是否可以选择任务标题行的所有假子任务行？

现有功能演示:http://jsfiddle.net/jasondavis/xhmb2ba1/

<小时/>

更新:

我刚刚遇到这个 jQuery 函数 https://api.jquery.com/nextUntil/这可能是我的解决方案的门票

Answer 1

我刚刚遇到这个 jQuery 函数 https://api.jquery.com/nextUntil/这似乎是我的情况的正确选择。

当 CTRL+单击 任务标题时，此行会选择所有子项。

// select child task under a task row until next task row is reached
if ($(this).parent().hasClass('heading-row'))
{
    if ($(this).parent().hasClass('selected'))
    {
        $(this).parent().nextUntil(".heading-row" ).addClass("selected");
    }else{
        //$(this).parent().nextUntil(".heading-row" ).toggleClass("selected");
        $(this).parent().nextUntil(".heading-row" ).removeClass("selected");
    }
}

这里的工作演示:http://jsfiddle.net/jasondavis/xhmb2ba1/8/