jQuery toggleClass带有单击选择on - on左键单击和右键单击 [英] jQuery toggleClass with single select on - on both left click and right click

问题描述

我有一个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  htmlBody + =' ; img id ='+'Img'+ i +'src ='+ imgArray [i] .src +'style =cursor：pointer; height：75％; width：75％; display： 10px; text-align：center; class =onclick =imageSelect（this）; oncontextmenu =rightClickMenu（this）;>< / img>'; 
} 
} 
 
 htmlBody + ='< / div>< div id =noScreenshot>< / div>'; 
  

我是jquery的新手。请帮忙！

解决方案

您可以使用事件委托，例如

  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  

pre class =snippet-code-css lang-css prettyprint-override> .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>   
I have multiple images in a div. On click of the image, it should toggle something like select and de-select. At a time only one img can be selected or none. I used the code below:
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');
    });
};
But at the end of it, at least one will remain selected. I don't want that. I should still be able to de-select image by clicking again but with single select functionality. 

The HTML code is:
            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>';
I am newbie to jquery. Please help! 
解决方案
You can use event delegation like



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带有单击选择on  -  on左键单击和右键单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！