jQuery addClass example

Change class name on click in jQuery

HTML

<div class="click" style="padding: 20px">
<div class="switch">Hello</div> 
<div class="switch">World</div>
</div>

<ul class='custom-menu4'>
    <li data-action = "first">Switch</li>
    <li data-action = "second">Cancel</li>
</ul>

CSS

.selecteddiv {
    border: 1px solid rgb(180, 13, 172);
  }
  
  .custom-menu4 {
    display: none;
    
  }

JavaScript

$(document).on("contextmenu","div", function(event) {
      
     // alert("right clicked");
      event.stopPropagation();
      this.clickedElement  = $(this);
      event.preventDefault();
      $(this.clickedElement).addClass('selecteddiv');
      $(".custom-menu4").show();
      
       $(".custom-menu4 li").unbind().click(function(){
       
       switch($(this).attr("data-action"))
   { 
      case "second":
       $(".custom-menu4").hide();
       $(".selecteddiv").removeClass('selecteddiv');
       break;
       
       case "first":
       $('.click').find('.switch').eq(0).appendTo($('.click'));
       break;
       
       
   }
       
       })
     
 
     // alert("add");
      });


$('.click').click(function (evt) {
  var $div = $(evt.target).first('.switch');
  $div.next('.switch').after($div);
});




/*    $(document).unbind().on("click", function(devent) {
      devent.stopPropagation();     $(".selecteddiv").removeClass('selecteddiv');
   
      alert("remove");
        
      });  
    */