Question

所以我试图设计一种用户友好的方式来选择多个图像并保存所选择的内容。

该页面将包含10张图片，每张图片都有自己唯一的ID。

当用户选择图像时，包含的div将突出显示以显示所选内容。

只需点击一下即可在此处找到一个有效的示例，而不是保存所选的div：

我的主要问题是，当我点击提交时，我想将突出显示的Div保存到数组中。

因此，如果用户点击了div id =“image1”并且div id =“image3”并点击了提交，这些选定的项目将被添加到一个数组中，然后我将向下提交。[image1，image3]

<div id="image1">Picture goes here</div>    
<div id="image2">Picture goes here</div>    
<div id="image3">Picture goes here</div>    
<div id="image4">Picture goes here</div>

我想选择多个并添加到数组中。

var selectedDivs =[]
var addclass = 'color';
var $cols = $('.divs').click(function(e) {
    $cols.removeClass(addclass);
    $(this).addClass(addclass);
  <!--Add id of which divs are selected to selectedDivs -->
});

Answer 1

你可以这样使用

与toggleClass一起使用，而不是添加和删除。它有助于检查多个图像
提交后将.divs与hasClass('color')匹配。然后按数组推送

Updated fiddle

var addclass = 'color';
 $('.divs').click(function(e) {
    $(this).toggleClass(addclass);
});

$(':submit').click(function(){
var res=[];
$('.divs').each(function(){
if($(this).hasClass('color')){
res.push($(this).attr('id'))
}

})
console.log(res)
})

使用JQuery突出显示多个Div并保存模式

1 个答案: