Tengo en una página web varios botones como ese:
<div class="jet-portfolio__filter-item" data-slug="slug-one"> <div class="jet-portfolio__filter-item" data-slug="slug-two">Estoy captando un parámetro de slug pasado en url que me dice en qué botón debo hacer clic en la carga de la página. La pregunta es ¿cómo puedo obtener el botón correcto usando javascript, ya que no tienen ID, para hacer clic en él?
Gracias !
Puede hacer esto muy simple con la función onclick JS. Entonces tiene dos opciones para leer el elemento de datos. 1) getAttribute() y 2) conjunto de datos
function myFn(elem) { console.log('with getAttribute:', elem.getAttribute('data-slug')) console.log('with dataset:', elem.dataset.slug) } <div class="jet-portfolio__filter-item" data-slug="slug-one" onclick="myFn(this)">click me! Slug One</div> <div class="jet-portfolio__filter-item" data-slug="slug-two" onclick="myFn(this)">click me! Slug Two</div>Debe usar el selector de atributos para seleccionar esos elementos (suponiendo que no esté usando sus clases para seleccionarlos).
Esta es la sintaxis del selector de atributos CSS : tag[attribute=value] . Creo que también puede reemplazar tag con class o id , pero no estoy seguro.
Ahora puede usar esta sintaxis en document.querySelector(selector) .
const slugOne = document.querySelector("div[data-slug=slug-one]"); console.log(slugOne.innerText); <div data-slug="slug-one">Content Of Slug One</div> <div data-slug="slug-two">Content Of Slug Two</div>Puede seleccionar todos los elementos por nombre de clase con "getElementByClassName" y luego hacer un bucle de todos los elementos y agregar EventListenet a todos los elementos seleccionados y pasar una función para obtener el atributo de cada elemento cuando el usuario hace clic.
var elements = document.getElementsByClassName("jet-portfolio__filter-item"); var onClickItems = function() { var slug = this.getAttribute("data-slug"); console.log(slug) }; for (var i = 0; i < elements.length; i++) { elements[i].addEventListener('click', onClickItems); } <div class="jet-portfolio__filter-item" data-slug="slug-one">Container number 1</div> <div class="jet-portfolio__filter-item" data-slug="slug-two">Container number 2</div>