Btukfyl

I have 3 img elements with ID's. When I click the element, I change the img src like this

$("#employee").on("click", function(){

    var x = $(this);



    var y = $(this).attr("src");



    if($(this).attr("src") == "images/employee.svg")

    {

            $(this).attr("src", "images/employee_selected.svg");

    }



    else

    {

            $(this).attr("src", "images/employee.svg");

    }

});



$("#team").on("click", function(){

    var x = $(this);



    var y = $(this).attr("src");



    if($(this).attr("src") == "images/team.svg")

    {

            $(this).attr("src", "images/team_selected.svg");

    }



    else

    {

            $(this).attr("src", "images/team.svg");

    }

});



$("#product").on("click", function(){

    var x = $(this);



    var y = $(this).attr("src");



    if($(this).attr("src") == "images/product.svg")

    {

            $(this).attr("src", "images/product_selected.svg");

    }



    else

    {

            $(this).attr("src", "images/product.svg");

    }

});

This code seems to be awfully repetitive and I was wondering if there was a way to do this in a single .on click function using something like a switch statement.

How could I simplify this into a single statement?

Consider the following code:

$(function() {

  $(".svg").on("click", function() {

    var x = $(this);

    var non = "images/" + x.attr("id") + ".svg";

    var sel = "images/" + x.attr("id") + "_selected.svg";



    if (x.attr("src").indexOf("_") < 0) {

      x.attr("src", sel).toggleClass("selected");

      console.log(sel);

    } else {

      x.attr("src", non).toggleClass("selected");

      console.log(non);

    }

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<div>

  <img id="employee" src="images/employee.svg" class="svg image" />

  <img id="team" src="images/team.svg" class="svg image" />

  <img id="product" src="images/employee.svg" class="svg image" />

</div>

We can extract the SRC of the element that was clicked and based on a specific condition, perform a specific action. This works for all elements with the class selector, svg.

Hope that helps.

In case you are OK with collections.

HTML:

<div>

  <img id="employee" src="images/employee.svg" class="svg" />

  <img id="team" src="images/team.svg" class="svg" />

  <img id="product" src="images/product.svg" class="svg" />

</div>

JS:

$(function() {



  var images = {

    employee :  ['images/employee.svg', 'images/employee_selected.svg'],

    team :      ['images/team.svg', 'images/team_selected.svg'],

    product :   ['images/product.svg', 'images/product_selected.svg']

  };



  $(".svg").on("click", function(e) {

    e.target.setAttribute("src", ( e.target.getAttribute("src") === images[e.target.id][0] ) ? images[e.target.id][1] : images[e.target.id][0]);

  });

});

https://jsfiddle.net/uo7rhnbf/2/

More advanced scenario from my side, but also more flexible.

How to invoke?

toggleElementsOn({

  selectors: [ 'body', '.btn1' ],

  event: 'mouseover',

  keyword: '_add_something_to_image_src_path'

})

Additionally as you can see, event and keyword is configurable.

Implementation:

Vanilla JS

function toggleElementsOn ({ selectors, event = 'click', keyword = '_selected' }) {

  /**

   * Get elements based on passed selectors

   * @param {Array<String>} args

   */

  const getElements = args => args.map(elem => document.querySelector(elem))

  const elems = getElements(selectors)



  elems.forEach(elem => elem.addEventListener(event, (e) => {

    e.preventDefault();



    const target = e.target;

    const matcher = new RegExp(`(${keyword}|[-a-zA-Z0-9]+)(\.[a-z]{3})$`, 'g');



    target.src = target.src.replace(matcher, (match, filenameOrPostfix, ext) => {

      return filenameOrPostfix === keyword ? ext : `${filenameOrPostfix}${keyword}${ext}`;

    });

  }));

}

jQuery version

$(document).ready(function () {

  function toggleElementsOn ({ selectors, event = 'click', keyword = '_selected' }) {

    /**

     * Get elements based on passed selectors

     * @param {Array<String>} args

     */

    const getElements = args => $.map(args, elem => $(elem))

    const elems = getElements(selectors)



    $.each(elems, (key, elem) => {

      $(elem).on(event, (e) => {

        e.preventDefault();



        const target = $(this);

        const matcher = new RegExp(`(${keyword}|[-a-zA-Z0-9]+)(\.[a-z]{3})$`, 'g');



        target.attr('src', target.attr('src').replace(matcher, (match, filenameOrPostfix, ext) => {

          return filenameOrPostfix === keyword ? ext : `${filenameOrPostfix}${keyword}${ext}`;

        }));

      })

    });

  }

});