javascript - 从列表中选择 4 张图像

Question

我想创建一个包含一百个图像框(50x50 px)的列表，并且我希望能够选择其中的四个。要检查第五个，我必须取消选中前面的一项。

我找到了 jQuery UI 可选择组件来执行此操作，我可以使用 ajax 将信息动态保存到数据库(所有内容都必须存储在此处的数据库中)。

问题是我找不到将选择限制为 4 个的选项，也找不到页面加载后默认选择元素的选项。

我怎样才能做我想做的事？

现在我只有 jQuery 代码:

$("#selectable").selectable();

选择图像的 SQL 和生成这些框的简单 for 循环。

谢谢!

Answer 1

这将限制使用 jQueryUI 可选择的前 4 个选择

function clearOverlimitSelections(evt, ui) {

  var selectableClasses = {
      selectableselecting: 'ui-selecting',
      selectableselected: 'ui-selected'
    },
    selectableClassName = selectableClasses[evt.type];

  var $selection = $(this).find('.' + selectableClassName);
  if ($selection.length >= 4) {         
    $selection.filter(':gt(3)').removeClass(selectableClassName)
  }


}

$("#selectable").selectable({
    selecting: clearOverlimitSelections,
    selected: clearOverlimitSelections
});

DEMO