Jquery Ui：可选择 - 可以 select 一次单击两个列表项？

Question

我正在列表中使用 Jquery Ui: selectable，我正在尝试弄清楚如何 select 一次单击两个列表元素。我想要它，以便当列表项为 clicked/selected 时，列表中的下一项也得到 selected.

ASPX 页面：

<button id="joinButton" type="button" class="collapsible inactiveSequenceTitle">
    <span style="margin-left: 0.35em;" class="icon expand-icon glyphicon glyphicon-plus">
    &nbsp
    </span>Join Sections
</button>
<div id="joinBox" class="panel-collapse collapse">
    <ul id="sortableJoin-1" style="width: 98%; margin: auto;"></ul>

    <div id="saveJoin">
        <button type="button" class="btn btn-primary" id="join">
            <span class="fa fa-save">
            &nbsp
            </span>Join 
        </button>
    </div>
</div>

Jquery/Jvascript:

$("#sortableJoin-1").selectable({
    selected: function(event, ui) {
        var selected = $("li[class$='ui-selected']").length;
    }
    stop: function (e) {
        var last = $("li[class$='ui-selected']:last").index();
        $("li:eq(" + (last + 1) + ")").addClass("ui-selected");
    },
});

$('#sortableJoin-1').click(function() {
    $(this).addClass('no-hover');
})

Answer 1

您可以使用在 select 操作结束时触发的 stop 事件 select 编辑项目的下一个项目。在 stop 中，获取带有 class ui-selected 的最后一个元素的索引，并将此 class 添加到列表中的下一个元素。

$("#sortableJoin-1").selectable({
  selected: function(event, ui) {
    var selected = $("li[class$='ui-selected']").length;
  },
  stop: function(e) {
   var last = $("li[class$='ui-selected']:last").index();
   $("li:eq(" + (last + 1) + ")").addClass("ui-selected");
  }
});

 .ui-selected {
    background: red;
    color: white;
    font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
              src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
              integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
              crossorigin="anonymous"></script>
        
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<button id="joinSectionsButton" type="button" class="collapsible inactiveSequenceTitle"><span style="margin-left: 0.35em;" class="icon expand-icon glyphicon glyphicon-plus">&nbsp;</span>Join Sections</button>
<div id="joinSectionsBox" class="panel-collapse collapse">
  <ul id="sortableJoin-1" style="width: 98%; margin: auto;">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
  </ul>

  <div id="saveJoinSections">
    <button type="button" class="btn btn-primary" id="joinSections"><span class="fa fa-save">&nbsp;</span>Join Sections</button>
  </div>
</div>

Jquery Ui：可选择 - 可以 select 一次单击两个列表项？

Jquery Ui: Selectable - possible to select two list items with one click?

javascript

jquery

jquery-ui

list

jquery-ui-selectable