我正在尝试 Serialize jQuery 示例。
我注意到一种行为，我可以使用鼠标和 Ctrl 键选择不相关的元素。
我只想选择连续的元素，而不是鼠标点击时的所有元素。
这是目前正在发生的事情，它以元素 1、2 和 6 作为选择。
我只想通过鼠标单击选择连续的元素而不是不相关的元素，并添加一个验证错误，您只能添加连续的元素，如下面的屏幕截图所示。
这是我目前正在处理的代码:
$(function() {
$(`#selectable`).bind("mousedown", function(e) {
e.metaKey = true;
}).selectable({
selected: function(event, ui) {
//For toggling between select clicks
if ($(ui.selected).hasClass('click-selected'))
$(ui.selected).removeClass('ui-selected click-selected');
else {
$(ui.selected).addClass('click-selected');
console.log(ui.selected.innerText);
let selectedID = ui.selected.id;
$("#select-result").append(ui.selected.innerText);
}
},
unselected: function(event, ui) {
$(ui.unselected).removeClass('ui-selected click-selected');
}
});
});#feedback {
font-size: 1.4em;
}
#selectable .ui-selecting {
background: #FECA40;
}
#selectable .ui-selected {
background: #F39814;
color: white;
}
#selectable {
list-style-type: none;
margin: 0;
padding: 0;
width: 60%;
}
#selectable li {
margin: 3px;
padding: 0.4em;
font-size: 1.4em;
height: 18px;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectable - Serialize</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
</ol>
</body>
</html>这是 fiddle ，我正在研究。
最佳答案
我认为有2种情况，
第一种情况是您的列表中没有选择任何元素，因此您可以选择任何元素。 第二种情况:当一个或多个元素被选中时，您必须确保要选择的元素是所选元素的邻居。
$(function () {
$(`#selectable`).bind("mousedown", function (e) {
e.metaKey = true;
}).selectable({
selected: function (event, ui) {
//For toggling between select clicks
if ($(ui.selected).hasClass('click-selected'))
$(ui.selected).removeClass('ui-selected click-selected');
else {
//case when no Item is selected on your list
let noItemIsSelected = !$(".ui-widget-content").hasClass('click-selected');
//Case when on of neighbor's Item selected
let oneOfNeighborsIsSelected = $(ui.selected).next().hasClass('click-selected') || $(ui.selected).prev().hasClass('click-selected');
if (noItemIsSelected || oneOfNeighborsIsSelected) {
$(ui.selected).addClass('click-selected');
console.log(ui.selected.innerText);
let selectedID = ui.selected.id;
console.log(event);
$("#select-result").append(ui.selected.innerText);
} else {
$(ui.selected).removeClass('ui-selected click-selected');
}
}
},
unselected: function (event, ui) {
$(ui.unselected).removeClass('ui-selected click-selected');
}
});
});
您可以看到您的代码的更新版本here
关于javascript - 使用 jQuery selectable 选择连续的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48866580/