@Naruto eso que hiciste con DX me gusta y se parece bastante a una extension que utilizo:
Hover Zoom https://chrome.google.com/webstore/detail/nonjdcjchghhkdoolnlbekcfllmednbl... a ver cuando te animas a escribir extensiones para Chrome.
cabe aclarar que no se programar, aun estoy queriendo aprender jeje pero megusta curosiar un poco y algo extraño con el script que a la hora de recorrer las etiquetas con la clase "price" y cambiar el atributo clase no se los cambia a todos de una sola vez sino que hay volver a usar el escript asta que se completen todos algun programador sabra porque? pero lo que si es que funciona aunque aya que recargar el script jeje ...
Para no saber programar haz hecho bastante
. Como dato curioso, yo recuerdo haber leido este tema cuando no sabia mucho JavaScript (tampoco visitaba SVC tan seguido). Así que si estas empezando vas por buen camino y aqui estamos a la orden.
------
Ahora con relación a tu pregunta
TL;DR: solucion simple: usa un for loop y cambia la propiedad display.Version larga:
Lo que sucede es que la función
getElementsByClassName regresa un objeto
NodeList, el cual es bastante parecido a un arreglo, pero no lo es.
document.getElementsByClassName('price') instanceof NodeList // trueCuando usas el
for/in estas iterando sobre todas las propiedades del objeto y esto incluye las propiedades no enumerables. En este caso el objeto regresado por
getElementsByClassName contiene dos propiedades adicionales a parte de los nodos del DOM que esperas.
Si corres el siguiente codigo en
http://aeoncomputadoras.com/productos/ram/, te darás cuenta cuales son estas propiedades adicionales:
var precio=document.getElementsByClassName("price");
for(var listado in precio){
console.log(listado, precio[listado]);
};Esto imprime
0 <p class="price">$19.00</p>
1 <p class="price">$28.00</p>
2 <p class="price">$35.00</p>
3 <p class="price">$19.00</p>
4 <p class="price">$28.00</p>
length 5
item function item() { [native code] }Ves un total de 7 propiedades. Las primeras 5 son nodos del DOM y tienen nombres númericos los cuales podes accesar mediante un for loop como si de un arreglo se tratara - de hecho la mayoria de programadores usan un for loop como si fuese un arreglo cuando iteran sobre nodos en un objeto NodeList. JS es bastante peculiar y te permite usar objetos como arreglos cuando estos tienen propiedades con nombres numericos y una propiedad adicional length.
Lo que sucede en tu codigo es que tratas de llamar al metodo
setAttribute desde un numero
entero y desde una
funcion, y este metodo solo esta presente en instancias que heredan propiedades de la clase
HTMLElement (nodos del DOM que son elementos html)
Como solucionas el problema? La solucion simple es usar un for loop, pero un programador curioso vale oro, por lo tanto intentaremos hacerlo usando el
for/in. Vos queres operar solamente sobre los elementos HTML, las propiedades adicionales: el numero length y la funcion item no te sirven.
Antes de seguir, recomiendo cambiar la propiedad
display de la propiedad
style (esta es equivalente a la propiedad display en CSS) en lugar de usar la funcion setAttribute y remover la clase price. Esto es debido a que necesitas mantener la clase de esos elementos para futuras operaciones y tambien evitar interferir con el estilo del diseño.
miElemento.style.display = 'block' // hace esto
miElemento.setAttributo('class', ''); // no estoVolviendo a la lista precio, solo queremos operar sobre los elementos y solamente aquellos que tienen una propiedad display. En lugar de verificar si un elemento es instancia de determinada clase e inferir que un metodo esta presente o usar un try/catch para atentar cambiar la propiedad display, utilizamos duck typing, es decir hacer el cambio solo en aquellos elementos que de hecho tengan la propiedad
style - para ser breves asumiremos que esta propiedad contiene una propiedad
display. Esto se puede hacer con el operador
in 'style' in document.getElementsByClassName("price")[0]; // trueEl problema es que el operador
in hace un prototype chain look-up, es decir busca por la propiedad a traves de la cadena de prototipos de un objeto. Lo recomendable es utilizar
hasOwnProperty el cual solamente busca por la propiedad en el objeto en si y no su cadena de herencia.
document.getElementsByClassName("price")[0].hasOwnProperty('style'); // truenota: esto no funciona en Firefox, leer mi proximo postEl codigo final quedaria asi:
var precio=document.getElementsByClassName("price");
for(var listado in precio){
var prop = precio[listado];
if(prop.hasOwnProperty('style')){
prop.style.display = 'block';
}
};
----
Ahora, para quienes hacen este tipo de bookmarks les recomiendo
siempre usar el keyword
var al momento de declarar variables y meter todo adentro de una función auto-ejecutable (estas se llaman IIFE en ingles - Immediately Invoked Function Expression)
(function(){
// TU CODIGO
}()); Esta es una manera de encapsulación.
A parte de esto hay otras técnicas para que sus scripts sean auto-actualizables y evitar que sus usuarios corran versiones viejas y tengan que estar cambiando el link (no recuerdo el post donde mencione como hacerlo).
