Jquery Ui:可选 - 可以一键选择两个列表项?
Posted
技术标签:
【中文标题】Jquery Ui:可选 - 可以一键选择两个列表项?【英文标题】:Jquery Ui: Selectable - possible to select two list items with one click? 【发布时间】:2020-10-13 12:21:19 【问题描述】:我正在使用 Jquery Ui: selectable on a list 并试图弄清楚如何一键选择两个列表元素。我想要这样当一个列表项被单击/选择时,列表中的下一个项目也被选中。
ASPX 页面:
<button id="joinButton" type="button" class="collapsible inactiveSequenceTitle">
<span style="margin-left: 0.35em;" class="icon expand-icon glyphicon glyphicon-plus">
 
</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">
 
</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');
)
【问题讨论】:
【参考方案1】:您可以使用在选择操作结束时触发的stop
事件来选择所选项目的下一个项目。在stop
中,获取类ui-selected
的最后一个元素的索引,并将该类添加到列表中的下一个元素。
$("#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"> </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"> </span>Join Sections</button>
</div>
</div>
【讨论】:
欣赏答案。不幸的是,它没有用。我已经相应地更新了上面的代码。 “运行代码 sn-p”按钮由于某种原因也无法运行 @NickyLarson 奇怪的是它不适合你,因为它在上面的 sn-p 以及这个 Fiddle 中工作:jsfiddle.net/qgeazj4d/1 我的工作防火墙阻止了代码 sn-p 的运行。我看到它确实有效。一定是我的代码有问题,我会弄明白的,谢谢你的帮助 也许它对我不起作用,因为我的代码中的 元素是动态添加的并且不是显式的?仍然没有设法让这个工作 问题改成这样解决了: $("#sortableJoin-1 li:eq(" + (last + 1) + ")").addClass("ui-selected");以上是关于Jquery Ui:可选 - 可以一键选择两个列表项?的主要内容,如果未能解决你的问题,请参考以下文章