gpt4 book ai didi

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

转载 作者:数据小太阳 更新时间:2023-10-29 05:18:37 26 4
gpt4 key购买 nike

我正在创建一个 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com