Question

我有以下观点：

<ul id="entries_list">
 <li>a</li>
 <li>b</li>
 <li>c</li>
</ul>

我希望有多项选择。当用户按住shift并单击第一个和第三个li时，将选择所有li。我试过Jquery selectable：

prev = -1;
$("#entries_list").selectable({
  filter:'li',
  selecting: (e, ui) ->
    curr = $(ui.selecting.tagName, e.target).index(ui.selecting);
    if(e.shiftKey && prev > -1)
      $(ui.selecting.tagName, e.target).slice(Math.min(prev, curr), 1 + Math.max(prev, curr)).addClass('custom_selected');
      prev = -1;
    else
      prev = curr;

但问题是我必须使用自定义类'custom_selected'。在上面的情况下，它选择正确的移位，但没有取消选择。 Jquery添加自己的类。是否可以覆盖默认类？如果我可以使用自定义类，会更容易。

编辑：

我有这个，但它的工作不正确：

http://jsfiddle.net/DJFaL/25/

EDIT2：

我真的很抱歉，但我粘贴了错误的jsfiddle。现在这是正确的。

Answer 1

为什么不简单地使用select with multiple attribute？或者简单的jQuery代码？无论如何，对于jQuery我为你创建了一个演示：

http://jsfiddle.net/lotusgodkk/DJFaL/26/

JS：

$('#entries_list li').on('click', function (e) {
    var li = $(this);
    var shift = e.shiftKey;
    if (shift) {
        if (li.hasClass('selected')) {
            li.removeClass('selected');
        } else {
            li.addClass('selected');
        }

    } else {
        $('.selected').removeClass('selected');
        li.addClass('selected');
    }
    var array = jQuery('#entries_list li.selected').map(function () {
        return $(this).text();
    }).get();
    $('p').text(array.join(','));
});

CSS：

.selected {
    background-color:#eee;
}
ul {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
}

HTML：

<ul id="entries_list">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>dc</li>
    <li>ddvc</li>
    <li>cvb</li>
    <li>gc</li>
    <li>cdf</li>
    <li>cd5</li>
</ul>Selected li:
<p></p>

默认情况下，我在li里面使用了文本，你可以在数组映射函数中$(this).text()到任何其他属性。

在JS中选择多个选项

1 个答案: