使用 jQuery selectable 选择连续元素答案

【问题标题】：Selecting consecutive elements using jQuery selectable使用 jQuery selectable 选择连续元素
【发布时间】：2018-07-29 17:06:06
【问题描述】：

我正在 jQuery 中尝试Serialize 示例。

我注意到一种行为，我可以使用鼠标和 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。

【问题讨论】：

标签： javascript jquery html css jquery-ui-selectable

【解决方案1】：

我认为有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

【讨论】：