attribute - ¿Cómo usar esto en JavaScript?
title html (8)
Como Alex escribió en los comentarios :
Me preguntaba si hay alguna forma de generar el mismo efecto usando JavaScript.
No, solo funciona con jQuery, que utiliza magia oscura.
jQuery está haciendo mal uso de this . De hecho, debe usarse solo en clases, no en devoluciones de llamadas.
Para lograr el mismo efecto usando DOM nativo:
- Use
document.querySelectorAll()para seleccionar todos los elementos<p>. - Convierta el resultado (
NodeList) en una matriz utilizandoArray.from(). - Llame al método
forEach()para ejecutar una función en todos los elementos. - Asigne un detector de eventos de
clicka cada elemento utilizando el métodoaddEventListener(). - Finalmente, dentro del detector de eventos, asigne
''none''ael.style.displaypara ocultar el elemento.
Demo en vivo
Array.from(document.querySelectorAll("p"))
.forEach(el => el.addEventListener(''click'', () => el.style.display = ''none''))
<p>Try clicking any of the paragraphs.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla purus metus, ullamcorper tempus augue interdum, efficitur vulputate lectus.</p>
<p>Vestibulum ullamcorper ultrices egestas.</p>
<p>Pellentesque volutpat, est ut convallis interdum, elit metus dapibus ex, non consectetur sem est et felis.</p>
En jQuery usamos:
$("p").click(function(){$(this).hide();});
En la declaración anterior, this es muy importante, ya que solo oculta el elemento p en el que hacemos clic. Pero en cambio, si usamos "p" en el lugar de this , ocultará todos los elementos p cuando hacemos clic en cualquiera de los elementos p .
Me preguntaba si hay alguna forma de generar el mismo efecto usando JavaScript. Lo intenté:
document.getElementsByTagName("p").onclick = function(){this.style.display:none;}
y
document.getElementsByTagName("p").onclick = function(){document.getElementsByTagName(this).style.display:none;}
Pero nada de esto funciona.
Debe iterar sobre cada elemento y luego usar addEventListener para adjuntarle un evento:
var allP = document.getElementsByTagName("p");
for(i=0; i< allP.length; i++) {
allP[i].addEventListener(''click'', function () {
this.style.display = "none";
});
}
El método document.getElementByTagName no existe.
Debería usar document.getElement**s**ByTagName lugar de eso, que devuelve una colección:
document.getElementsByTagName("p")[0].onclick = function(){
this.style.display= "none";
}
O usa esto para el mismo ejemplo de $("p") :
var elems = document.getElementsByTagName("p");
for(var i = 0; i < elems.length; i++){
elems[i].onclick = function(){
this.style.display= "none";
}
}
Si prefieres las funciones de flecha o no puedes confiar en this por alguna razón, puedes tomar e.currentTarget en e.currentTarget lugar:
const elems = document.getElementsByTagName("p");
const handleClick = e => console.log(e.currentTarget); //logs the clicked element
for (let i = 0; i < elems.length; i++) {
elems[i].addEventListener(''click'', handleClick);
}
Ya que está usando getElementsByTagName, le dará un objeto de matriz, no un solo elemento, por lo que debe iterarlo en un bucle y vincular el evento de clic con cada elemento como se muestra a continuación:
var domLength = document.getElementsByName(''p'').length;
for (var i=0; i<domLength; i++) {
document.getElementsByName(''p'')[i].style.display = none;
}
document.getElementsByTagName ("p") devuelve una colección. Debe iterar y enlazar el evento en cada elemento como:
Array.prototype.slice.call(document.getElementsByTagName("p"))
.forEach(function(element) {
element.onclick = function() {
element.style.display = ''none'';
}
});
Paso 1: Obtener todos los párrafos
Paso 2: adjunte un clickListener a cada elemento en los párrafos
<html>
<head><title>Test</title></head>
<body>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>
<script type="text/javascript">
function paragraphsClickHandler() {
this.style.display = "none";
}
var paragraphs = document.getElementsByTagName("p");
var i;
for(i=0; i<paragraphs.length; i++)
paragraphs[i].addEventListener("click", paragraphsClickHandler);
</script>
</html>
var bubblingToEle = function (target, type, value) {
while(target){
switch (type){
case ''nodeName'':
if(target.nodeName === value){
return target;
}
break;
default :
break;
}
target = target.parentNode;
if(target.nodeName === ''HTML''){
break;
}
}
return null;
}
document.body.addEventListener(''click'', function (e) {
var target = e.target,
isPTag = bubblingToEle(target, ''nodeName'', ''P'');
if(isPTag){
isPTag.style.display = ''none'';
}
})
Creo que esto es mejor, no hay necesidad de unir a muchos oyentes.