Question

我需要为一天中的每个小时创建一个用户可选择的网格。我做了一些研究并且发现了jquery可选择以及这个小提琴 - http://jsfiddle.net/QGzj9/33/ - 经过一些修改后我会看到我想要的。

我的问题是我需要能够存储所选值的数组，以便能够将它们传递给php来执行db的东西。因此，例如，如果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的选定值。

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

1 个答案: