Finden Sie eine bestimmte Klasse aus mehreren in jQuery

Ich erstelle eine JS-Datei, die einen Ripple-Touch-Effekt erzeugt, wenn Sie auf ein Objekt klicken. Ich möchte dem Element im HTML-Code eine Klasse zuweisen, die einfach ein Farbcode wie # f6ac32 ist, und dann eine Funktion in Javascript/jQuery erstellen, die diesen Farbcode auswählen und daraus später eine Variable erstellen kann verwenden (um die Farbe des Welleneffekts zu ändern). Ist das möglich? HierFinden Sie eine bestimmte Klasse aus mehreren in jQuery

ist das, was ich gemacht habe (siehe Info Kommentar in $ out() mousedown- (Funktion) 'Ripple'..):

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

Auch wenn Sie neugierig, here's die Seite, ich verwende es für

Quelle

2015-07-06 Alex Wohlbruck

wo Sie den Farbcode holen –

Ich mag den Farbcode als eine Klasse in dem HTML-Elemente schreiben, zum Beispiel:

–

Meine Frage eigentlich wirklich einfach ist, ich habe gerade brauchen Diese HTML-Klasse wird in eine JS-Variable umgewandelt, ohne dass weitere Klassen hinzugefügt werden, die an das Element angehängt werden könnten. –

Verwenden Sie keine Klassen, verwenden Sie data attributes. Sie können auf diese Weise alle Arten von beliebigen Informationen direkt auf DOM-Knoten speichern.

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

Quelle

2015-07-06 04:38:27 Oka

Danke! Ich wusste nicht, dass diese Funktion überhaupt existiert! –

Finden Sie eine bestimmte Klasse aus mehreren in jQuery

Antwort

Verwandte Themen