Onclick of image toggle image src

Question

I have 3 menus in my page and for each menu I have 2 color of images(blue and green img).

• by default blue imgs are there
• onclick of menu it will be replaced by green img

Onclick on each menu images should be toggled accordingly. I have done it and its working fine.

HTML:

<div class="catSection">
  <div class="col-md-2 col-sm-4  col-xs-4">
    <img src="design.svg" id='changeImage1' ng-click="changeImage($event)">
  </div>
  <div class="col-md-2 col-sm-4 col-xs-4">
    <img src="compute.svg" id='changeImage2' ng-click="changeImage($event)">
  </div>
  <div class="col-md-2 col-sm-4  col-xs-4">
    <img src="cloud.svg" id='changeImage3' ng-click="changeImage($event)">
  </div>
</div>

Client Script:

$scope.changeImage = function(event) {

  // $(".catSection img").removeClass("active");
  //$(event.target).addClass("active");

  if (event.target.src.split('/')[3] == 'design.svg')
    $("#" + event.target.id).attr("src", "design_open1.svg");
  else if (event.target.src.split('/')[3] == 'design_open1.svg')
    $("#" + event.target.id).attr("src", "design.svg");

  if (event.target.src.split('/')[3] == 'compute.svg')
    $("#" + event.target.id).attr("src", "compute_open.svg");
  else if (event.target.src.split('/')[3] == 'compute_open.svg')
    $("#" + event.target.id).attr("src", "compute.svg");

  if (event.target.src.split('/')[3] == 'cloud.svg')
    $("#" + event.target.id).attr("src", "public_open.svg");
  else if (event.target.src.split('/')[3] == 'public_open.svg')
    $("#" + event.target.id).attr("src", "cloud.svg");
}

Issue is when I click on one menu img ,rest of the menu imgs are suppose to replaced by blue which means initial position.

Its same as like a toggling active classes between list elements.

I am stuck there. Can anyone suggest some ideas please?

Answer 1

Try this.

Add two data- attributes to the image

1. data-src - store the blue image src
2. data-srcActive - store the green image src

Now on your ng-click event do these

1. Loop through each img which is a descendant of catSection
2. find the clicked image by matching the id
3. if clicked img has blue image, make it green else blue
4. else blue image Code

$scope.changeImage = function(event) {

  var target = event.target,
    targetImg = target.src.split('/').pop();

  $('.catSection img').each(function() {
    var elm = this,
      $elm = $(elm);
    // if img is clicked image and default state
    if (elm.id === target.id && elm.src === $elm.data('src')) {
      elm.src = $elm.data('srcActive'); //active
    } else { // reset all other src to default
      elm.src = $elm.data('src'); //default
    }
  });

};

<div class="catSection">
  <div class="col-md-2 col-sm-4  col-xs-4">
    <img data-src="design.svg" data-srcActive="design_open1.svg" src="design.svg" id='changeImage1' ng-click="changeImage($event)">
  </div>
  <div class="col-md-2 col-sm-4 col-xs-4">
    <img data-src="compute.svg" data-srcActive="compute_open.svg" src="compute.svg" id='changeImage2' ng-click="changeImage($event)">
  </div>
  <div class="col-md-2 col-sm-4  col-xs-4">
    <img data-src="cloud.svg" data-srcActive="public_open.svg" src="cloud.svg" id='changeImage3' ng-click="changeImage($event)">
  </div>
</div>

Answer 2

I have no experience with Angular yet, but your jQuery function could look like this. In this example I've added a p tag to show the sources of the images.

$(document).ready(function() {

  $('.catSection img').on('click', onClickCatSectionImage);

  function onClickCatSectionImage(event) {
    var targetImage = $(event.target);
    var targetSrc = targetImage.attr('src');

    // this selector is important to get the other menues too
    $('.catSection img').not(targetImage).each(function(index, element) {
      var siblingImage = $(element);
      siblingImage.attr('src', siblingImage.attr('src').replace('_open1.svg', '.svg'));
    });

    if (targetSrc.includes('._open1.svg')) {
      targetImage.attr('src', targetSrc.replace('_open1.svg', '.svg'));
    } else {
      targetImage.attr('src', targetSrc.replace('.svg', '_open1.svg'));
    }

    // this function could be deleted because is just for showing the image sources
    showImageSrc();
  }

  function showImageSrc() {
    $('.catSection img').each(function(index, element) {
      $(element).siblings('p').text($(element).attr('src'));
    });
  }

});

img {
  width: 100%;
  height: 100px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row catSection">
  <div class="col-md-2 col-sm-4 col-xs-4">
    <img src="design.svg" id="changeImage1">
    <p></p>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-4">
    <img src="compute.svg" id="changeImage2">
    <p></p>
  </div>
  <div class="col-md-2 col-sm-4  col-xs-4">
    <img src="cloud.svg" id="changeImage3">
    <p></p>
  </div>
</div>

<div class="row catSection">
  <div class="col-md-2 col-sm-4 col-xs-4">
    <img src="o_design.svg" id="changeImage4">
    <p></p>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-4">
    <img src="o_compute.svg" id="changeImage5">
    <p></p>
  </div>
  <div class="col-md-2 col-sm-4  col-xs-4">
    <img src="o_cloud.svg" id="changeImage6">
    <p></p>
  </div>
</div>