Find a specific class from several in jQuery

Question

I am creating a js file that creates a touch effect when I click on an object. I want to assign a class to an element in html code, which is just a color code, for example # f6ac32, and then create a function in Javascript / jQuery that can select that color code and create a variable from it, which I can use later (to change ripple effect color). Is it possible?

Here is what I did (see the comment in $ ('. Ripple'). Mousedown (function)):

$(document).ready(function() { var rplObj, x, y, ink, color, rplDelTimer; //fade out ripple when unclicked $('.ripple').mouseup(function() { $('.ink').css({'opacity':'0'}); delRipple(); }) //Delete ripple element one second after last click function delRipple() { rplDelTimer = setTimeout(function() { $('.ink').remove(); }, 1000) } $('body').mousemove(function(e){ //update mouse coordinates when it is moved x = e.pageX; y = e.pageY; }) $('.ripple').mousedown(function(){ rplObj = $(this); color = "#FFF"; //I want this to dynamically change depending on the class written in html rippleClosed(); }) function rippleClosed() { rplObj.prepend('<span class="ink"></span>'); //create ripple ink = rplObj.find('.ink'); //create variable for ink span ink.css('background',color); //set ripple color to color variable //set diameter of ripple if(!ink.height() && !ink.width()) { //set diameter to parents width/height (whichever is larger) d = Math.max(rplObj.outerWidth(), rplObj.outerHeight()); ink.css({height: d, width: d}); } //set coordinates of ripple using position of mouse defined earlier x = x - rplObj.offset().left - ink.width()/2; y = y - rplObj.offset().top - ink.height()/2; //set the position and animate the expansion ink.css({top: y+'px', left: x+'px'}).css({'transform':'scale(1.8)'}); //reset ripple deletion timer clearTimeout(rplDelTimer); } }) 

 div { background: #199ee3; width: 300px; height: 100px; } .ripple { position: relative; overflow: hidden; } .ink { position: absolute; border-radius: 100%; opacity: .4; transform: scale(0); -moz-transition: all 1s ease; -o-transition: all 1s ease; -webkit-transition: all 1s ease; transition: all 1s ease; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ripple"></div> <p>Click the rectangle!</p> 

Also, if you're interested, here is the site that I use for

Answer 1

Do not use classes, use attributes. You can store all kinds of arbitrary information directly on the DOM nodes in this way.

 $('div').on('click', function () { var ripple = $(this).data('ripple'); alert(ripple); }); 

 div { background: #199ee3; width: 300px; height: 100px; } 

 <div data-ripple="#FFF"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>