How to use jQuery toggleClass with single selection - for left and right click events

Question

How to use jQuery toggleClass with single selection - for left and right click events

I have a situation where I need to toggle the selection and de-selection of images within a div. Only one image should be selected at a time, or none at all. I tried using the following code:

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

However, I noticed that at least one image remains selected at the end, which is not what I want. I want to be able to de-select an image by clicking on it again while still maintaining single select functionality.

The HTML code looks like this:

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="handleImageSelection(this);" oncontextmenu="rightClickMenu(this);"></img>';  
}   
} 

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

I'm fairly new to jQuery and would appreciate any help with resolving this issue!

javascript jquery css

Answer 1

Answer №1

If you're looking to optimize performance, consider implementing event delegation in your code:

function loadImages() {
  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="loadImages()">Load</button>

Answer 2

If you're looking to optimize performance, consider implementing event delegation in your code:

function loadImages() {
  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="loadImages()">Load</button>

How to use jQuery toggleClass with single selection - for left and right click events

Answer №1

Similar questions

Ways to determine if an AngularJS modal is currently displayed

Card columns with dropdown extending into adjacent column

Is it time to use JQuery post-DocumentReady?

Getting URL parameters in NextJS when using Custom Document can be achieved by accessing the `ctx`

Div inside is being cutoff by a div with 100% height

Error occurs when loading AngularJS based on browser version

Do any iOS web browsers via CSS support OpenType font characteristics?

The format provided is not utilized by Datetimepicker

Quickest method to locate an item within a deeply nested array or object

Setting the default in jQuery and Rails when the document is ready

In Less.js, an action will be taken if the @color equals a specific value

What could be the reason behind the unexpected outcome of process.argv[3] when its value is set to '*'?

Error encountered: Required closing JSX tag for <CCol> was missing

Steps to connect two drop-down menus and establish a starting value for both

How to accomplish multiple tasks at once using jQuery

Which database is best suited for making authenticated cross-domain JSON calls?

What is the best way to target children elements within individual instances of a specific class?

Using ejs express with node.js to showcase the output of mysql queries

Error encountered while attempting to load image through multiple window.print() functions

Managing the overflow of flex-boxes