Question

我想创建一个包含100个图像框（50x50像素）的列表，我希望能够选择其中的四个。要检查第五个，我必须取消选中之前的一个。

我发现jQuery UI可选组件可以做到这一点，我可以使用ajax动态地将信息保存到数据库（这里所有东西都必须存储在数据库中）。

问题在于我找不到将选项限制为4的选项，而且在页面加载后我无法找到默认选择元素的选项。

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

现在我只有jQuery代码：

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

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

谢谢！

Answer 1

这将限制使用jQueryUI selectable

的前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

Answer 2

假设你有这个：

<img class="select-4" ...>
<img class="select-4" ...>
...
<img class="select-4" ...>

以下jQuery代码最多应选择4个图像：

$('img.select-4').on('click', function(){
   var iAmSelected = $(this).hasClass('selected');
   if (iAmSelected) {
      $(this).removeClass('selected');
   } else {
      var canAddSelection = $('img.select-4').length < 4;
      if (canAddSelection) {
         $(this).addClass('selected');
      }
   }
});

然后，您可以使用selected类根据需要设置所选图像的样式。相同的技术可以与<input type="checkbox">元素一起使用。

从列表中选择4个图像

2 个答案: