Znajdź konkretną klasę z wielu w jQuery

Question

Tworzę plik js, który tworzy efekt ripple touch po kliknięciu obiektu. Chcę przypisać klasę do elementu w kodzie HTML, który jest po prostu kodem kolorowym, takim jak # f6ac32, a następnie utworzyć funkcję w JavaScript/jQuery, która może wybrać ten kod koloru i utworzyć z niego zmienną, którą mogę później użyj (aby zmienić kolor efektu tętnienia). czy to możliwe?

Oto co zrobiłem (zobacz komentarz w $() mouseDown (funkcja) 'marszczyć'..):

$(document).ready(function() { 
 

 
var rplObj, 
 
\t x, 
 
\t y, 
 
\t ink, 
 
\t color, 
 
\t rplDelTimer; 
 

 

 

 
//fade out ripple when unclicked 
 
$('.ripple').mouseup(function() { 
 
\t $('.ink').css({'opacity':'0'}); 
 
\t delRipple(); 
 
}) 
 

 
//Delete ripple element one second after last click 
 
function delRipple() { 
 
\t rplDelTimer = setTimeout(function() { 
 
\t \t $('.ink').remove(); 
 
\t }, 1000) 
 
} 
 

 
$('body').mousemove(function(e){ 
 
\t //update mouse coordinates when it is moved 
 
\t x = e.pageX; 
 
\t y = e.pageY; 
 
}) 
 

 

 

 
$('.ripple').mousedown(function(){ 
 
\t rplObj = $(this); 
 
\t color = "#FFF"; //I want this to dynamically change depending on the class written in html 
 
\t rippleClosed(); 
 
}) 
 

 

 

 
function rippleClosed() { 
 
\t rplObj.prepend('<span class="ink"></span>'); //create ripple \t \t 
 
\t ink = rplObj.find('.ink'); //create variable for ink span 
 
\t ink.css('background',color); //set ripple color to color variable 
 

 
\t //set diameter of ripple 
 
\t if(!ink.height() && !ink.width()) { 
 
\t \t //set diameter to parents width/height (whichever is larger) 
 
\t \t d = Math.max(rplObj.outerWidth(), rplObj.outerHeight()); 
 
\t \t ink.css({height: d, width: d}); 
 
\t } 
 

 
\t //set coordinates of ripple using position of mouse defined earlier 
 
\t x = x - rplObj.offset().left - ink.width()/2; 
 
\t y = y - rplObj.offset().top - ink.height()/2; 
 
\t 
 
\t //set the position and animate the expansion 
 
\t ink.css({top: y+'px', left: x+'px'}).css({'transform':'scale(1.8)'}); 
 
\t 
 
\t //reset ripple deletion timer 
 
\t clearTimeout(rplDelTimer); 
 
} 
 
    
 
})

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

 
.ripple { 
 
\t position: relative; 
 
\t overflow: hidden; 
 
} 
 

 
.ink { 
 
\t position: absolute; 
 
\t border-radius: 100%; 
 
\t opacity: .4; 
 
\t transform: scale(0); 
 
\t -moz-transition: all 1s ease; 
 
\t -o-transition: all 1s ease; 
 
\t -webkit-transition: all 1s ease; 
 
\t 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>

Ponadto, jeśli jesteś ciekawy, here's Witryna, której używam, do:

Answer 1

Nie używaj klas, używaj data attributes. W ten sposób możesz przechowywać wszystkie rodzaje dowolnych informacji bezpośrednio na węzłach DOM.

$('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>