Question

我正在使用图片选择器插件来选择图像。 https://rvera.github.io/image-picker/

我有一个小问题。我怎么能写一个声明来说明所有选择的图像都不是做某事。

我将有一个提交按钮。如果选择了所有图像，我将需要按钮显示，否则隐藏。

HTML

<select class="image-picker" multiple="multiple" id="freestanding-sings-selection" name="freestanding-sings-selection" >
  <option class="process-icons" data-img-src='../../css/freestanding-signs/insert-fts.png' value="1" id="insert">
  </option>
  <option class="process-icons insert_cover" data-img-src="../../css/freestanding-signs/cover-fts.png" value="2">
  </option>
  <option class="" data-img-src="../../css/freestanding-signs/label.png" value="3">
  </option>
</select>

的JavaScript

$("#freestanding-sings-selection").imagepicker({
  //if all images slected {
    //do something
  //}
});

谢谢

编辑自制支票

$("#freestanding-sings-selection").imagepicker({
  selected: function(selected) { 
    if (selected.length >= 3) {
      alert(3);
    }
  }
});

Answer 1

如果您阅读了图像选择器的文档，您会看到该插件实现了一些回调;更改，单击，选中。当您执行某些操作（如单击图像）以及更改所选图像时，将触发回调。

所以做这样的事情：

$("#freestanding-sings-selection").imagepicker({
    selected: function() { 
        if (document.querySelectorAll('.selected').length > 3) {
            // do something
        }
    }
})

这是selected触发器的示例，确定您真正需要的那个

我使用了document.querySelectorAll（'。selected'），因为Image Picker的demopage显示所选图像获得所选类。因此可以简单地计算它们并将它们添加到您的businesslogic

如果所有图像选择 - 图像选择器插件jQuery

1 个答案: