首頁猿問在 Javascript...

在 Javascript 中實現類似 jquery 的 addClass、removeClass

JavaScript

喵喔喔 2022-07-21 10:54:26

假設 $ 不是瀏覽器。現在要實現$，它會接受一個字符串，這是一個查詢，它會使用querySelector來選擇元素。（參考：https ://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector ）$('text')現在實現 jquery 之類的函數 addClass 和 removeClass。（參考：https ://developer.mozilla.org/en-US/docs/Web/API/Element/classList ）$('#test').removeClass('blue').addClass('red');現在實現 jquery 之類的函數延遲。（參考：https ://api.jquery.com/delay/ ）在這里我被卡住了，無法為這種情況實施延遲。$('#test').removeClass('blue').delay(2000).delay(1000).addClass('red');代碼示例function $(selector) { let element = document.querySelector(selector) Object.prototype.addClass = function (className) { this.classList.add(className) return this } Object.prototype.removeClass = function (className) { this.classList.remove(className) return this } Object.prototype.delay = function(ms){ // what to do? return this } return element}$('#test').removeClass('blue').delay(2000).delay(1000).addClass('red');<!DOCTYPE html><html> <head> <style> .blue{ background-color: blue; } .red{ background-color: red; } </style> </head> <body> <div id="test" style="width: 200px; height: 200px;" class="blue"></div> </body></html>

查看完整描述

3 回答

夢里花落0921

TA貢獻1772條經驗獲得超6個贊

我試圖使用隊列和任務運行器來解決這個問題。任何人都可以檢查這是否看起來不錯，或者我們可以改進它嗎？

function $(selector) {

let element = document.querySelector(selector)

element.queue = []

element.active = false

return element

}

Element.prototype.next = function () {

if (this.queue.length) this.runTask(this.queue.shift())

}

Element.prototype.runTask = function (callBack) {

this.active = true

callBack().then(() => {

this.active = false

this.next()

})

}

Element.prototype.register = function(callBack){

if (this.active) {

this.queue.push(callBack)

} else {

this.runTask(callBack)

}

Element.prototype.addClass = function (className) {

that = this

let callBack = () => new Promise(resolve => setTimeout(function () {

that.classList.add(className)

resolve()

}, 0))

this.register(callBack)

return this

}

Element.prototype.removeClass = function (className) {

that = this

let callBack = () => new Promise(resolve => setTimeout(function () {

that.classList.remove(className)

resolve()

}, 0))

this.register(callBack)

return this

}

Element.prototype.delay = function (ms) {

that = this

let callBack = () => new Promise(resolve => setTimeout(function () {

resolve()

}, ms))

this.register(callBack)

return this

}

$('#test')

.removeClass("red").delay(500)

.addClass("blue").delay(500).delay(500).removeClass("blue")

.delay(500).addClass("red").delay(500).removeClass("red")

.delay(500).addClass("blue").delay(500).removeClass("blue")

.delay(500).addClass("red").delay(500).removeClass("red")

<!DOCTYPE html>

<html>

<head>

<style>

.blue{

background-color: blue;

}

.red{

background-color: red;

}

</style>

</head>

<body>

</body>

</html>

反對回復 2022-07-21

皈依舞

TA貢獻1851條經驗獲得超3個贊

Object.prototype.delay實現起來并不容易，因為您必須引入某種隊列，例如 jQuery 在內部使用。這是因為您希望callback在調用 in時執行一些進一步的邏輯setTimeout(callback, ms)。

如你的例子 .delay(2000).delay(1000).addClass('red');

反對回復 2022-07-21

白板的微信

TA貢獻1883條經驗獲得超3個贊

const $ = function(params){

let elems = document.querySelectorAll(params);

let dealyTime = 0

return {

addClass: function addClass(args){

setTimeout(() => {

elems.forEach((ele) => {

ele.classList.add(args);

dealyTime = 0

})

}, dealyTime)

return this;

delay: function delay(time){

dealyTime += time;

return this;

removeClass: function removeClass(args){

setTimeout(() => {

elems.forEach((ele) => {

ele.classList.remove(args);

dealyTime = 0

})

}, dealyTime)

return this;

}

反對回復 2022-07-21

3 回答
0 關注
181 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在 Javascript 中實現類似 jquery 的 addClass、removeClass

在 Javascript 中實現類似 jquery 的 addClass、removeClass

3 回答

添加回答

在 Javascript 中實現類似 jquery 的 addClass、removeClass