mi preocupación es que hay una lista y cada elemento de la lista tiene un botón delante de ellos, así que tengo que realizar alguna acción cuando el usuario hace clic en el botón, entonces, ¿cómo puedo apuntar a los múltiples botones con el mismo class_Name en java_script? Aquí está mi j_s código =
function getActiveCampaigns() { fetch('http://example/api/sign/in', { method: 'GET', headers: { token: "token" } }).then( res => { res.json().then( data => { console.log(data.response.campaign, 'campaign'); if (data.response.campaign.length > 0) { let temp = ""; data.response.campaign.forEach((itemData) => { temp += "<ul>"; temp += "<li>" + itemData.name + "</li>"; temp += '<li><button class="btn1">Add to campaigns</button></li></ul>' }); document.getElementById("ds").innerHTML = temp; } } ) } ) } this code is that i have been tried but did not worked= $("btn1").each(function click1(index, element) { var clas = $(element).attr("class"); if(clas.length > 2) { // do something console.log("Hello World!"); } });const collection = document.getElementsByClassName("classname");El método getElementsByClassName devuelve 'una matriz' ("una HTMLCollection en vivo, que es muy similar a una matriz" - usuario1599011). Puedes iterar a través de él como
foreach (element in array) { Do anything with element}Un detector de eventos de un solo clic puede manejar 1, 10 o 1000 botones con facilidad.
En mi fragmento, la mayor parte del código se ocupa de crear y mostrar 20 elementos li , cada uno con un botón y algo de texto.
Un detector de eventos de un solo clic maneja los clics en cualquiera de los botones. He usado un AND condicional para procesar el subconjunto de eventos que ocurren en un button AND que están en un li del nombre de clase correcto (en caso de que tenga varias listas y quiera hacer cosas diferentes en cada una). Este es el detector de eventos:
document.addEventListener('click', event => { if (event.target.tagName == 'BUTTON' && event.target.parentElement.className == 'list-item') { // stuff to execute alert(`${event.target.innerHTML} button pressed`); } // end if; }); // end event listener; Se puede agregar cualquier número de bloques if al mismo detector de eventos para tratar con cualquier otra parte de la página para la que desee procesar eventos de clic.
Tenga en cuenta que no se necesitaron ids ni nada complicado para distinguir el objetivo de los demás (ese es el trabajo del oyente). Este ejemplo ni siquiera necesitaba un atributo de clase, pero lo incluí para que pueda ver cómo se puede lograr una especificidad adicional (por ejemplo, es posible que tenga dos listas con botones y quiera hacer cosas diferentes con ellos).
Aquí está el fragmento de trabajo:
let list = document.getElementsByTagName('ul')[0]; for (let i=0; i<20; i++) { let listItem = document.createElement('li'); listItem.setAttribute("class", "list-item"); listItem.innerHTML = `<button>element ${i}</button> list item ${i}`; list.appendChild(listItem); } // next. document.addEventListener('click', event => { if (event.target.tagName == 'BUTTON' && event.target.parentElement.className == 'list-item') { // stuff to execute alert(`${event.target.innerHTML} button pressed`); } }); <ul> </ul>