Quiero modificar todos los elementos que usan la misma consulta a través de una función. (La función no cambia.)
r es lectura, w es escritura y a es escritura adjunta al contenido existente. Cuando uso esto como get(query).r , .w , .a , quiero que todos los elementos correspondan.
Por ejemplo, si la clase de etiquetas 3p es html, si escribe get(".html").w("hola") en js, todas las etiquetas con la clase 3 html deben cambiarse a 'hola'.
function get(id){ if (id) { if (window === this) { return new get(id); } var query = document.querySelectorAll(id) for(var i = 0; i < query.length; i++) { this.e = query[i]; return this; } } else { return "getError : The attribute and value of a tag such as id or class specified by get does not exist. "; } } get.prototype = { r: function () { return this.e.innerText; }, w: function (writing) { return this.e.innerText = writing; }, a: function (writing) { return this.e.innerText = this.e.innerText += writing; } }; <a href="#" class="test">js</a> <p href="#" class="test">html</p> <a href="#" class="test">test</a> <script> get(".test").w("hello") </script>Para esta linea
for(var i = 0; i < query.length; i++) { this.e = query[i]; return this; }Solo está devolviendo el primer elemento. Por lo tanto, solo cambia el texto interno del primer elemento.
Parece que está intentando asignar un prototipo a los elementos HTML, lo cual no se recomienda, así que modifiqué su código.
Lo cambié para que la función get devuelva la HTMLCollection completa en su lugar. Luego usé el prototipo de la función get para recorrer la colección y establecer el texto de los elementos HTML.
<a href="#" class="test">js</a> <p href="#" class="test">html</p> <a href="#" class="test">test</a> <script> function get(id){ if (id) { if (window === this) { return new get(id); } var query = document.querySelectorAll(id) return query } else { return "getError : The attribute and value of a tag such as id or class specified by get does not exist. "; } } get.prototype = { r: function () { return this.e.innerText; }, w: function (elems, writing) { return elems.forEach(x => x.innerText = writing); }, a: function (writing) { return this.e.innerText = this.e.innerText += writing; } }; var elems = get(".test") get.prototype.w(elems, "html") </script>También puede hacer esto con un método de clase ES2015 más nuevo, que usa métodos estáticos. Los métodos estáticos se llaman directamente en la clase, sin crear una instancia/objeto de la clase. De esa manera, puede llamar al método estático y devolver el objeto de clase a esos métodos.
Más información aquí:
Vea el fragmento a continuación:
`use strict` class Get { constructor(selector) { if (selector) return Array.from(document.querySelectorAll(selector)); return []; } static Read(elements) { return elements.map(e => e.innerText) }; static Write(elements, string) { elements.forEach(e => e.innerText = string) }; static Append(elements, string) { elements.forEach(e => e.innerText = `${e.innerText}${string}`) }; } console.log(Get.Read(new Get(`.test`))); Get.Append(new Get(`.test`), `: Appended Text`); <a href="#" class="test">js</a> <p href="#" class="test">html</p> <a href="#" class="test">test</a>