jQuery addClass example

Change class name on click in jQuery

by firegroove

HTML

<div id="thePanel" style="height:200px;border:1px dashed green">
  <br>
  <button id="viewMaskOnOff" class="topcoat-button b_quarter myCorner" title="Enable/Disable the Current Mask" name="Invert Mask">Mask On/Off</button>
  <button id="hophop" class="topcoat-button b_quarter myCorner" title="Enable/Disable the Current Mask" name="Tu me voies plus">Tu me voies</button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  width: 150px;
  margin-left: 20%;
  margin-top: 6%;
}

button:hover {
  background-color: red;
}

JavaScript

var mainName = null;
var altName = null;
var myWatcher = "viewMaskOnOff";
var myWatchedButton = "#viewMaskOnOff";


function theShiftKey(myparam2) {

document.

  var myparam1 = '#' + myparam2;
  $(myparam1).mouseover(function(e) {
    mainName = document.getElementById(myparam2).innerHTML;
    altName = document.getElementById(myparam2).name;

    $(document).keydown(function(e) {
      if (e.keyCode == 16) {
        document.getElementById(myparam2).innerHTML = altName;
      }
    });

    $(document).keyup(function(e) {
      if (e.keyCode == 16) {
        document.getElementById(myparam2).innerHTML = mainName;
      }
    });

    $(myparam1).mouseleave(function(e) {
      document.getElementById(myparam2).innerHTML = mainName;
      $(document).off();
    });
  });
	
	
}

/* theShiftKey(myWatchedButton, myWatcher); */
/* theShiftKey('#'+'tumevoies', 'tumevoies'); */
theShiftKey('hophop');








/* $("#viewMaskOnOff").mouseleave(function(e) {
alert(e.keyCode);
document.getElementById("viewMaskOnOff").innerHTML = "Mask";
    }) */