將 jQuery 轉換為 Vanilla JS

Question

我想將這個短代碼轉換為 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')

Answer 1

最后一點（ window.setTimeout ）正在刪除添加的 div。 函數名稱是相同的，因此您不需要更改它，假設您已經使用document.createElement創建了 div。

對於$(this)問題，您可以替換event.target ，然后將 jQuery 函數更改為純 JS 函數。