Scenario : Say using JQuery, i am listening to events on a webpage under class page > adminSwitch and page > premiumSwitch.

And whats new to me is, till this point i did’nt know with jQuery you can do something like this, say when we use $(this), it means we are refering to the element that triggered the event. In that triggered function, we can use $(this) to refer to the element. What i didn’t know is, we can call another function and don’t have to pass $(this) to it as jQuery does this automatically and refer the element that triggered the event.

//jQuery will automatically invoke function with the proper context set 
//meaning no need to pass $(this).
$('.page').on('click', '.adminSwitch',  getSwitchValues);
$('.page').on('click', '.premiumSwitch', getSwitchValues);

This is the function getSwitchValues is defined before the above two statements. Notice the highlighted statement $(this) here refers to the toggle switch which triggered the event.

  function getSwitchValues(){
    let classname = $(this).attr('class');
    console.log(classname);
 
    let uid = $(this).attr('content');
    console.log(uid);
 
    let cbAdminSwitch=null, cbPremiumSwitch=null;
    if(classname =="adminSwitch"){
      cbAdminSwitch = $(this).prop('checked');
      //This goes up(closest) and next() and finds the class and checks the property
      cbPremiumSwitch = $(this).closest('td').next().find('.premiumSwitch').prop('checked');  
    }else{
      cbPremiumSwitch = $(this).prop('checked');
      //This goes up(closest) and next() and finds the class and checks the property
      cbAdminSwitch = $(this).closest('td').prev().find('.adminSwitch').prop('checked');
    }
 
    console.log(cbAdminSwitch);
    console.log(cbPremiumSwitch);
    updateClaims(uid, cbAdminSwitch, cbPremiumSwitch);
  }