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

您可以使用

之类的事件委派

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>

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

1 个答案: