[英]Convert jQuery to Vanilla JS
我想将这个短代码转换为 vanilla JS,但我对某些事情感到迷茫。 你能帮我吗 ?
这是转换这支笔
(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);
我已经尝试替换 de "addClass" 但我不明白最终的 "window, jQuery"。 我不知道如何处理那些 $('this')
最后一点( window.setTimeout
)正在删除添加的 div。 函数名称是相同的,因此您不需要更改它,假设您已经使用document.createElement
创建了 div。
对于$(this)
问题,您可以替换event.target
,然后将 jQuery 函数更改为纯 JS 函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.