单击选择的jQuery toggleClass – 在左键单击和右键单击

我在div中有多个图像。 单击图像时，应切换选择和取消选择等内容。 一次只能选择一个img或者没有。 我使用下面的代码：

function imageSelect(img) { $("#" + img.id).toggleClass("htmlView_img_select_toggle"); $('#snapshotsRpt > img').click(function (e) { e.preventDefault; $('.htmlView_img_select_toggle').removeClass('htmlView_img_select_toggle'); $(this).addClass('htmlView_img_select_toggle'); }); }; 

但最终，至少有一个将继续被选中。 我不希望这样。 我仍然可以通过再次单击但使用单选function取消选择图像。

HTML代码是：

  htmlBody+='
'; if (imgArray && imgArray.length>0){ for (var i=0;i<imgArray.length;i++){ htmlBody+=''; } } htmlBody+='
'; 

我是jquery的新手。 请帮忙！

Answer 1

您可以使用事件委托

 function loadimgs() { var htmlBody = '', imgArray = []; for (var i = 0; i < 10; i++) { imgArray.push({ src: '//placehold.it/100?text=' + (i + 1) }) } htmlBody += '
'; if (imgArray && imgArray.length > 0) { for (var i = 0; i < imgArray.length; i++) { htmlBody += ''; } } htmlBody += '
'; $('body').append(htmlBody); } //on dom ready $(document).on('click', '#snapshotsRpt img', function() { console.log('a') $('#snapshotsRpt img.htmlView_img_select_toggle').not(this).removeClass('htmlView_img_select_toggle'); $(this).toggleClass('htmlView_img_select_toggle'); }); 

 .htmlView_img_select_toggle { border: 1px solid green; } 

  Load