jjzjj

javascript - 在 jQuery 中从多个类中查找特定类

coder 2024-12-20 原文

我正在创建一个 js 文件，当您单击一个对象时，它会产生波纹触摸效果。我想为 html 代码中的元素分配一个类，它只是一个颜色代码，如 #f6ac32，然后在 Javascript/jQuery 中创建一个函数，它可以挑选出该颜色代码并从中创建一个我以后可以使用的变量使用(改变波纹效果的颜色)。这可能吗？

这是我所做的(查看 $('.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>

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

最佳答案

不要使用类，使用 data attributes .您可以通过这种方式将各种任意信息直接存储在 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>

关于javascript - 在 jQuery 中从多个类中查找特定类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31237753/

javascriptjQuerysectionripplecodecss

有关javascript - 在 jQuery 中从多个类中查找特定类的更多相关文章

  1. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题

  2. ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2

    我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代

  3. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  4. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法，但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

  5. ruby-on-rails - 在 ruby​​ .gemspec 文件中，如何指定依赖项的多个版本？ - 2

    我正在尝试修改当前依赖于定义为activeresource的gem:s.add_dependency"activeresource","~>3.0"为了让gem与Rails4一起工作，我需要扩展依赖关系以与activeresource的版本3或4一起工作。我不想简单地添加以下内容，因为它可能会在以后引起问题:s.add_dependency"activeresource",">=3.0"有没有办法指定可接受版本的列表？~>3.0还是~>4.0？ 最佳答案 根据thedocumentation,如果你想要3到4之间的所有版本，你可以这

  6. ruby - 当使用::指定模块时，为什么 Ruby 不在更高范围内查找类？ - 2

    我刚刚被困在这个问题上一段时间了。以这个基地为例:moduleTopclassTestendmoduleFooendend稍后，我可以通过这样做在Foo中定义扩展Test的类:moduleTopmoduleFooclassSomeTest但是，如果我尝试通过使用::指定模块来最小化缩进:moduleTop::FooclassFailure这失败了:NameError:uninitializedconstantTop::Foo::Test这是一个错误，还是仅仅是Ruby解析变量名的方式的逻辑结果？ 最佳答案 Isthisabug,or

  7. ruby - 查找字符串中的内容类型(数字、日期、时间、字符串等) - 2

    我正在尝试解析一个CSV文件并使用SQL命令自动为其创建一个表。CSV中的第一行给出了列标题。但我需要推断每个列的类型。Ruby中是否有任何函数可以找到每个字段中内容的类型。例如，CSV行:"12012","Test","1233.22","12:21:22","10/10/2009"应该产生像这样的类型['integer','string','float','time','date']谢谢! 最佳答案 require'time'defto_something(str)if(num=Integer(str)rescueFloat(s

  8. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  9. ruby - 使用多个数组创建计数 - 2

    我正在尝试按0-9和a-z的顺序创建数字和字母列表。我有一组值value_array=['0','1','2','3','4','5','6','7','8','9','a','b'，'光盘'，'e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','','u','v','w','x','y','z']和一个组合列表的数组，按顺序，这些数字可以产生x个字符，比方说三个list_array=[]和一个当前字母和数字组合的数组(在将它插入列表数组之前我会把它变成一个字符串，]current_combo['0','0','0']

  10. ruby-on-rails - before_filter 运行多个方法 - 2

    是否有可能:before_filter:authenticate_user!||:authenticate_admin! 最佳答案 before_filter:do_authenticationdefdo_authenticationauthenticate_user!||authenticate_admin!end 关于ruby-on-rails-before_filter运行多个方法，我们在StackOverflow上找到一个类似的问题： https://

随机推荐