[英]Convert jQuery to Vanilla JS
I would like to convert this short code into vanilla JS but I'm lost with some things.我想将这个短代码转换为 vanilla JS,但我对某些事情感到迷茫。 Can you help me please ?
你能帮我吗 ?
This is to convert this Pen这是转换这支笔
(function (window, $) {
$(function() {
$('.ripple').on('click', function (event) {
event.preventDefault();
var $div = $('<div/>'),
btnOffset = $(this).offset(),
xPos = event.pageX - btnOffset.left,
yPos = event.pageY - btnOffset.top;
$div.addClass('ripple-effect');
var $ripple = $(".ripple-effect");
$ripple.css("height", $(this).height());
$ripple.css("width", $(this).height());
$div
.css({
top: yPos - ($ripple.height()/2),
left: xPos - ($ripple.width()/2),
background: $(this).data("ripple-color")
})
.appendTo($(this));
window.setTimeout(function(){
$div.remove();
}, 2000);
});
});
})(window, jQuery);
I already try to replace de "addClass" but I dont understand the final "window, jQuery".我已经尝试替换 de "addClass" 但我不明白最终的 "window, jQuery"。 And I dont what to do with those $('this')
我不知道如何处理那些 $('this')
The final bit ( window.setTimeout
) is removing the div that got added.最后一点(
window.setTimeout
)正在删除添加的 div。 The function name is the same, so you don't need to change that, assuming you've created the div with document.createElement
.函数名称是相同的,因此您不需要更改它,假设您已经使用
document.createElement
创建了 div。
For the $(this)
quandry, you can substitute event.target
, and then change the jQuery functions to the plain JS function.对于
$(this)
问题,您可以替换event.target
,然后将 jQuery 函数更改为纯 JS 函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.