javascript 从缩略图网格中选择多个图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5731898/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select multiple images from a grid of thumbnail images
提问by dangerousdave
I have grid of thumbnail images on a form, and I would like for the user to be able to select multiple images, and have their selection submitted with the form.
我在表单上有缩略图网格，我希望用户能够选择多个图像，并将他们的选择与表单一起提交。
My requirements are:
我的要求是：
- Single click to select the image, and selection is fed back to user, e.g by changing the border.
- Degrade gracefully to just html, and still work.
- Cross browser/device support (needs to work on ipad for example)
- 单击以选择图像，并将选择反馈给用户，例如通过更改边框。
- 优雅地降级为 html，并且仍然有效。
- 跨浏览器/设备支持（例如需要在 ipad 上工作）
Can all my requirements be satisfied?
我的所有要求都能得到满足吗？
thanks.
谢谢。
回答by ITroubs
You could do it like this: thumbnail and on top or right next to it you put your checkbox. Then via jquery you hide the checkboxes and attach your click events to the thumbnails that check and uncheck the checkboxes. thus you have support for browsers supporting jquery and not supporting any javascript at all. if the browser doesn't support the js then the checkboxes won't be hidden and the checkboxes are usable as usual. if the browser does then they will be hidden and the fancy js actions will be used instead.
您可以这样做：缩略图并在其顶部或旁边放置您的复选框。然后通过 jquery 隐藏复选框并将单击事件附加到选中和取消选中复选框的缩略图。因此，您可以支持支持 jquery 而根本不支持任何 javascript 的浏览器。如果浏览器不支持 js，则复选框不会被隐藏，并且复选框可以照常使用。如果浏览器这样做，那么它们将被隐藏，而将使用花哨的 js 操作。
for example:
例如：
<div id="container1" class="container">
<img>
<input class="cbox" type="checkbox" name="foo[]" value="foo1"/>
</div>
<div id="container2" class="container">
<img>
<input class="cbox" type="checkbox" name="foo[]" value="foo1"/>
</div>
$(document).lad(function(){
$(".container .cbox").hide();
$(".container img").click(function(){
//do the stuff you need to do like
var $checkbox = $(this).parent().find(".cbox");
$checkbox.attr('checked', !$checkbox.attr('checked'));
});
});
try it out. this may work but i give no guaranty.
试试看。这可能有效，但我不提供任何保证。
回答by Josiah Ruddell
For a javascript approach fiddle:
对于 javascript 方法小提琴：
Markup:
标记：
<div>
<img data-id="1" src="" />
<input type="hidden" name="images[ ]" />
</div>
Script:
脚本：
$('img').live('click', function(){
var $this = $(this);
$this.toggleClass('selected');
if($this.hasClass('selected'))
$this.next(':hidden').val($this.data('id'))
else
$this.next(':hidden').val('');
});
回答by Shrikant Sharat
If you want such fancy stuff as changing the border color of selected thumbnails, you will need javascript to do it. Especially if you need cross browser support.
如果您想要更改所选缩略图的边框颜色等奇特的东西，您将需要 javascript 来完成。特别是如果您需要跨浏览器支持。
As for when javascript is turned off, which I assume, is what you meant in your second point, I'd just use checkboxes for the thumbnails and let the user select what he/she needs.
至于何时关闭 javascript，我认为这就是您在第二点中的意思，我只是使用缩略图的复选框，让用户选择他/她需要的内容。
