在 Javascript 中实现类似 jquery 的 addClass、removeClass
假设 $ 不是浏览器。现在要实现$，它会接受一个字符串，这是一个查询，它会使用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
我试图使用队列和任务运行器来解决这个问题。任何人都可以检查这是否看起来不错，或者我们可以改进它吗？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> <div id="test" style="width: 150px; height: 150px; margin:10px;" class="red"></div> </body></html> -
皈依舞
Object.prototype.delay实现起来并不容易，因为您必须引入某种队列，例如 jQuery 在内部使用。这是因为您希望callback在调用 in时执行一些进一步的逻辑setTimeout(callback, ms)。如你的例子 .delay(2000).delay(1000).addClass('red'); -
白板的微信
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; } } }
随时随地看视频慕课网APP
相关分类
JavaScript