Javascript 在jquery样式库中编写循环元素的函数

我正在编写一个非常简单的jquery模拟库，以允许一些简单的DOM操作

我正在编写允许我更改文本颜色等的方法。当我希望更改类元素颜色时，我必须在每个方法中使用循环。理想情况下，我希望有一个函数为我循环，然后我可以在每个方法中使用。不幸的是，我的尝试没有成功

请参阅下面我的代码：

function _(elem) {
  this.classOrId(elem);
}

_.prototype = {
  add: function(text) {
    if (this.e.length >= 1) {
      for (var i = 0; i < this.e.length; i++) {
        this.e[i].innerHTML = this.e[i].innerHTML + text;
      }
    } else {
      this.e.innerHTML = this.e.innerHTML + text;
    }
    return this;
  },
  replace: function(text) {
    if (this.e.length >= 1) {
      for (var i = 0; i < this.e.length; i++) {
        this.e[i].textContent = text;
      }
    } else {
      this.e.textContent = text;
      document.body.appendChild(elem);
    }
    return this;
  }
}

_.prototype.classOrId = function(elem) {
  var classOrId = elem.charAt(0);
  if (classOrId === "#") {
    elem = this.sliceElement(elem);
    this.e = document.getElementById(elem);
    return this;
  } else if (classOrId === ".") {
    elem = this.sliceElement(elem)
    this.e = document.getElementsByClassName(elem);
    return this;
  }
};

_.prototype.sliceElement = function(elem) {
  var elem = elem.slice(1);
  return elem;
};

函数（elem）{
这个。classOrId（elem）；
}
_.原型={
添加：函数（文本）{
如果（该长度>=1）{
对于（var i=0；i=1）{
对于（var i=0；i

正如您所看到的，这段代码中有大量重复。我试着写下面的内容来减少重复，但没有成功。 如有任何建议，将不胜感激

_.prototype.loopOverElements = function(effect) {
  for (var i = 0; i < this.e.length; i++) {
    return this.e[i][effect];
  }
}

\uU4.prototype.loopOverElements=函数（效果）{
对于（var i=0；i

对于下面的代码，当javascript DOM方法（如

innerHTML

，

style

）被传递到函数中时，它无法识别这些方法

---

对于上面的代码，如果我将效果传递到loopOverElements函数中，则表明

console.log（this.e[I][effect]）

在传递到方法中时未定义。

使用括号表示法，即

[effect]

而不是

.effect

：

_.prototype.loopOverElements = function(effect){
  for(var i = 0; i < this.e.length; i++){
    return this.e[i][effect];
  }
}

\uU4.prototype.loopOverElements=函数（效果）{
对于（var i=0；i

---

另请参见。

您可能应该将此发布在上，但我会尝试一下。首先困扰我的是所有的

if（this.e.length>=1）{}else{}

。使

e

成为一个数组，即使只有一个元素，也只有变量的值应该是“variate”而不是它的类型

关于

classOrId（）

，由于（返回所需的数组），它可以减少到一行。因此，代码变成：

function _(elem) {
    var about = {
        Name: "pQuery",
        Version: 0.1,
        Author: "Paul Fitzgerald"
    }

    if (elem) {
        if (window === this) {
            return new _(elem);
        }
        this.e = document.querySelectorAll(elem); // no need for classOrId() anymore
    } else {
        return about;
    }
}

_.prototype = {
    add: function (text) {
        // no if else anymore
        for (var i = 0; i < this.e.length; i++) {
            this.e[i].innerHTML = this.e[i].innerHTML + text;
        }
        return this;
    }
}

函数（elem）{
var about={
名称：“pQuery”，
版本：0.1，
作者：“保罗·菲茨杰拉德”
}
if（elem）{
如果（窗口===此）{
返回新元素（elem）；
}
this.e=document.querySelectorAll（elem）；//不再需要classOrId（）
}否则{
返回大约；
}
}
_.原型={
添加：函数（文本）{
//再也没有了
对于（var i=0；i

关于重复，请将函数分成类似的用法，例如，您可以为与样式相关的所有操作编写一个函数：

_.prototype = {
    _eachStyle: function (prop, value) {
        for (var i = 0; i < this.e.length; i++) {
          this.e[i].style[prop] = value;
        }

        return this;
    },
    hide: function () {
        return _eachStyle('display', 'none');
    },
    color: function (color) {
        return _eachStyle('color', color);
    }
}

\原型={
_每个类型：函数（属性、值）{
对于（var i=0；i

对于基本属性：

_.prototype = {
    _each: function (prop, value, append) {
        append = append || false; // by default, replace the value
        for (var i = 0; i < this.e.length; i++) {
          this.e[i][prop] = append ? element[prop] + value : value;
        }
        return this;
    },
    add: function (text) {
        return _each('innerHTML', text, true);
    },
    replace: function (text) {
        return _each('textContent', text);
    }
}

\原型={
_每个：函数（属性、值、附加）{
append=append | | false；//默认情况下，替换该值
对于（var i=0；i

类似地，对于要在所有元素上调用的函数：

_.prototype = {
    _eachFn: function (fn, args) {
        for (var i = 0; i < this.e.length; i++) {
          this.e[i][fn](args);
        }
        return this;
    },
    remove: function () {
        return _eachFn('remove');
    },
}

\原型={
_eachFn：函数（fn，args）{
对于（var i=0；i

解决问题的另一种方法是使用回调函数：

_.prototype.applyOnElements = function(callback) {
   for(var i = 0; i < this.e.length; i++){
     callback(this.e[i]);
   }
}

---

然后还有改进的地方，通过将循环替换为并包含

if（this.e是数组），然后。。。其他的endif

在这个函数中，以避免更多的代码重复。

正如我在前面的聊天会话中提到的，您基本上希望对数组中的每个DOM元素应用转换。使用一个定义需要做什么的函数，并通过该函数映射每个元素是理想的方法

_.prototype.loopOverElements = function(effect) {
  for (var i = 0; i < this.e.length; i++) {
    effect(this.e[i]);
  }
};

And I can use it as

var test = new _('.test');
test.loopOverElements(function(elem) {
  elem.innerHTML += " Modified";
});

---

对于这一点，当我传入一个“效果”时，它说

innerHTML

不是defined@PaulFitzgerald当您

console.log（this.e[i]）

时会得到什么？另外，您是将

innerHTML

作为参数传递，还是将字符串

作为“innerHTML”

传递？如果我将其作为字符串传递，它将返回类的html数组，但是不执行元素样式的更新如果您想在文本编辑器中处理整个代码，您可以在此处找到：

https://github.com/Pau1fitz/pQuery/blob/master/index.html

通过这样做并在我自己的文本编辑器中查看代码，我总是发现回答这些问题更容易圈套

_.prototype.loopOverElements = function(effect) {
  for (var i = 0; i < this.e.length; i++) {
    effect(this.e[i]);
  }
};

And I can use it as

var test = new _('.test');
test.loopOverElements(function(elem) {
  elem.innerHTML += " Modified";
});

_.prototype.set = function set(obj, path, value) {
  var codeString = 'obj';
  codeString += path.split('.').reduce(function(prev, curr) {
    return prev += '.' + curr;
  }, '');

  codeString += ' = value';
  eval(codeString);
};

Now your loop code looks like

_.prototype.loopOverElements = function(property, value){
  for(var i = 0; i < this.e.length; i++){
    this.set(this.e[i], property, value);
  }
};

And it can be used like

document.addEventListener("DOMContentLoaded", function(event) {
  var test = new _('.testClass');
  test.loopOverElements('style.color', 'red');
});