在我自己的 EACH 函数上创建 callback 时遇到问题。
我正在使用 OOP 方法来完成它。
基本上，我创建了自己的模仿 JQUERY 习惯的 javascript 库。
检查这个 fiddle 的 Action :https://jsfiddle.net/6pk068ep/1/
<div class="parent">
<p class="child">child</p>
</div>
<div class="parent">
<p class="child">child</p>
</div>
JavaScript:
"use strict";
(function(window) {
var i, $, $Obj, ele; // global variable
$ = function(el, length) {
return new $Obj(el, length); // create new object
};
$Obj = function(el, length) {
ele = document.querySelectorAll(el); // get selector element
this.length = ele.length; // count the length of ele
for (i = 0; i < this.length; i++) {
this[i] = ele[i]; // loop it
}
};
$Obj.prototype = { // object prototype
each : function(fn) { // create method each just like jquery
var arr = []; // create array to store value
for (i = 0; i < this.length; i++) {
arr.push(this[i]); // push it to arr variable
}
fn.apply(this, arr); // IS THIS THE CORRECT WAY TO APPLY IT?
return this; // return this, so, it's chainable for other method
}
};
window.$ = $; // make dollar sign global object
})(window);
$(".child").each(function() {
console.log(this);
this.style.color = "red"; // not working, what's wrong with my code? is it because my "apply" wrong?
});
如何将那些 .child 风格的颜色变成红色？
我的代码有什么问题？
提前致谢...
最佳答案
当您说 each() 时，假设将为集合中的每个项目调用回调，因此在这种情况下您需要在 for 循环中调用回调。
另请注意，ele 和 i 等变量不是全局变量，它们应该是您使用它们的函数的局部变量。
"use strict";
(function(window) {
var $, $Obj; // global variable
$ = function(el, length) {
return new $Obj(el, length); // create new object
};
$Obj = function(el, length) {
var ele, i;
ele = document.querySelectorAll(el); // get selector element
this.length = ele.length; // count the length of ele
for (i = 0; i < this.length; i++) {
this[i] = ele[i]; // loop it
}
};
$Obj.prototype = { // object prototype
each: function(fn) { // create method each just like jquery
var i;
for (i = 0; i < this.length; i++) {
fn.call(this[i], this[i], i);
}
return this; // return this, so, it's chainable for other method
}
};
window.$ = $; // make dollar sign global object
})(window);
$(".child").each(function() {
console.log(this);
this.style.color = "red"; // not working, what's wrong with my code? is it because my "apply" wrong?
});<div class="parent">
<p class="child">child</p>
</div>
<div class="parent">
<p class="child">child</p>
</div>关于Javascript OOP 回调 "this"应用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36029427/