jquery selectable - 需要存储一个选定值的数组

Question

我需要为一天中的每个小时创建一个用户可选择的网格。我做了一些研究，发现了 jquery selectable 以及这个 fiddle - http://jsfiddle.net/QGzj9/33/ - 经过一些修改后，它看起来就像我想要的那样。

我的问题是我需要能够存储所选值的数组，以便能够将它们传递给 php 以执行数据库内容。因此，例如，如果一个 li 选择了该类，我需要将其值存储到一个数组中，或者如果未选择则将其删除。

另外，我不需要鼠标的实际选择能力。相反，我宁愿只单击以选择并单击以取消选择。我还没有玩过这么多，但就使用它而言，jquery ui 对我来说是新的。

我在下面包含了 js，但完整的代码/css 显示在小提琴中。

var _selectRange = false, _deselectQueue = [];

$( "#selectable" ).selectable({
    selecting: function (event, ui) {
        if (event.detail == 0) {
            _selectRange = true;
            return true;
        }
        if ($(ui.selecting).hasClass('ui-selected')) {
            _deselectQueue.push(ui.selecting);
        }
    },
    unselecting: function (event, ui) {
        $(ui.unselecting).addClass('ui-selected');
    },
    stop: function () {
        if (!_selectRange) {
            $.each(_deselectQueue, function (ix, de) {
                $(de)
                    .removeClass('ui-selecting')
                    .removeClass('ui-selected');
            });
        }
        _selectRange = false;
        _deselectQueue = [];
    }
});

编辑解决方案：

我昨晚和今天早上考虑了更多，并决定完全消除 ui selectable 的使用。当我只需要一个简单的切换功能时，我只是没有看到这一点（鼠标拖动选择对我来说并不重要）。这是生成的 js，对我来说似乎工作得很好。

$('#selectable li').on('click', function() {
  $(this).toggleClass('ui-selected'); 
});

function getSelected() {
    var selectedVals = [];
    $('.ui-selected').each(function(k,v) {
        selectedVals.push($(v).text());
    });
    alert(selectedVals);
}

$('#getVals').click(function() {
    getSelected();
});

Answer 1

FIDDLE

  function getSelected() {
    var selectedVals = [];
    $('.ui-selected').each(function(k,v) {
        selectedVals.push($(v).text());
    });
    alert(selectedVals);
  }

var selectedVals = getSelected();

调用此函数时，它将获取selectedVals 数组中的所有选定值，您可以将这些值传递给 PHP。