javascript - jQuery toggleClass with single select on - 左键单击和右键单击

Question

我在一个 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');
    });
};

但在它结束时，至少会有一个被选中。我不想要那个。我仍然可以通过再次单击但具有单选功能来取消选择图像。

HTML代码是:

            htmlBody+='<div id="snapshotsRpt">';

        if (imgArray && imgArray.length>0){
            for (var i=0;i<imgArray.length;i++){
                htmlBody+='<img id="'+'Img'+i+'" src="'+imgArray[i].src+'" style="cursor: pointer; height:75%; width: 75%; display: block; margin: 10px; text-align: center;" class="" onclick="imageSelect(this);" oncontextmenu="rightClickMenu(this);"></img>';  
            }   
        } 

        htmlBody+='</div><div id="noScreenshot"></div>';

我是 jquery 的新手。请帮忙!

Answer 1

你可以像这样使用事件委托(delegate)

function loadimgs() {
  var htmlBody = '',
    imgArray = [];
  for (var i = 0; i < 10; i++) {
    imgArray.push({
      src: '//placehold.it/100?text=' + (i + 1)
    })
  }

  htmlBody += '<div id="snapshotsRpt">';

  if (imgArray && imgArray.length > 0) {
    for (var i = 0; i < imgArray.length; i++) {
      htmlBody += '<img id="' + 'Img' + i + '" src="' + imgArray[i].src + '" style="cursor: pointer; height:75%; width: 75%; display: block; margin: 10px; text-align: center;" class="" oncontextmenu="rightClickMenu(this);"></img>';
    }
  }

  htmlBody += '</div><div id="noScreenshot"></div>';
  $('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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="loadimgs()">Load</button>