JQ3

ADVANCED JAVASCRIPT LAB PROGRAMS

   3.     Using jQuery add a new class to an element that already has a class.

PROGRAM:

Third.html

<html>

<head>

<script src="jquery-3.3.1.js"></script>

<title>JS Bin</title>

<link rel="stylesheet" type="text/css" href="styles3.css"></link>

<script type="text/javascript" src="mythird.js"></script>

</head>

<body>

<p class="w3r_bg_orange">The best way we learn anything is by practice and exercise

questions.</p>

<button id="button1">Click to see the effect</button>

</body>

</html>

Styles3.css

button {

    display: block;

    margin: 20px 0 0 0;

    }

p {

    background: white;

  }

  .w3r_bg_orange{

    background: orange;

  }

  .w3r_bg_red {

    color: red;

  }

Mythird.js

$(document).ready(function(){

$("button").click(function(){

$( "p" ).addClass(function( index, currentClass ) {

var addedClass;

if ( currentClass === "w3r_bg_orange" ) {

addedClass = "w3r_bg_red";

}

return addedClass;

});

});

});

OUTPUT: