在jQuery中查找多个特定类

Question

我正在创建一个js文件，当您单击一个对象时会创建一个波纹触摸效果。我想为html代码中的元素分配一个类，它只是一个像＃f6ac32这样的颜色代码，然后在Javascript / jQuery中创建一个函数，可以选择那个颜色代码并创建一个变量，我以后可以使用（改变涟漪效果的颜色）。这可能吗？

以下是我所做的（查看$（＆＃39; .ripple＆＃39;）中的评论.mousedown（function））：

＆＃13;

＆＃13;

$(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);
}
  
})

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

此外，如果您有点好奇，here's我使用它的网站

Answer 1

不要使用课程，请使用data attributes。您可以通过这种方式直接在DOM节点上存储各种任意信息。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<div data-ripple="#FFF"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;