Javascript-Funktion, um divs zu klassifizieren?

Question

Ich arbeite an einer Website, auf der Inhalte dynamisch hinzugefügt werden. Ich möchte die gleiche Klasse bei jedem Div haben. Wenn Sie auf dieses div klicken, wird die Klasse in einem JavaScript-Skript aufgerufen, in dem eine Funktion ausgeführt wird.

Wie soll ich das tun?

Beispiel:

 <div class="thisclass"> 
     HTML 
    </div> 

    <div class="thisclass"> 
     HTML 
    </div> 

    <div class="thisclass"> 
     HTML 
    </div> 

    <script> 
     document.getElementByClassName("thisclass").addEventListener("click",function(){ 
      //do something with the specific clicked div 
     }); 
    </script> 

Mein Code aus meiner eigenen Seite:

<div class="settings-opslag"> 
     <p>‹</p> 
</div> 
<script> 
    document.getElementByClassName("settings-opslag").addEventListener("click",function(){ 
     document.getElementByClassName("settings-opslag").style.background = "red"; 
    }); 
</script> 

Dank!

Answer 1

Sie können keinen Ereignis-Listener auf ein array-ähnliches Objekt anwenden, das die getElementsByClassName-Funktion zurückgibt. Listener müssen auf einzelne Elemente angewendet werden. Iteriere darüber und binde es.

Array.from(document.getElementsByClassName('thisclass')).forEach(v => 
    v.addEventListener('click',() => { 
    // do something 
    }) 
) 

können Sie versuchen, ohne Pfeil Funktionen und ES6 Funktionen:

const elems = document.getElementsByClassName('thisclass'); 
for (var i = 0; i < elems.length; i++) { 
    elems[i].addEventListener('click', function() { 
     // do something 
    }) 
} 

Array#from Funktion wird verwendet, Array-artiges Objekt in ein Array zu ändern.

Answer 2

Es gibt einen Schreibfehler in getElementsByClassName (es benötigt die s), und Sie müssen über die Nodeliste, die Sie daraus erhalten, iterieren. Im Inneren des Event-Handler können Sie das geklickt Element mit this Referenz:

for (let elem of document.getElementsByClassName("thisclass")) {  
 
    elem.addEventListener("click", function() { 
 
     this.style.background = "red"; 
 
    }); 
 
}

<div class="thisclass">HTML1</div> 
 
<div class="thisclass">HTML2</div> 
 
<div class="thisclass">HTML3</div>

Answer 3

ich wäre schön, wenn Sie jQuery und eine Schleife durch alle divs verwenden, und fügen Sie sie ein Ereignis-Listener. Beispiel:

$(".thisclass").each(function(){ 
$(this).on("click",function(){ 
    //here use the "this" reference to manipulate the clicked div 
    //Like 
    $(this).addClass("newclass"); 
    }); 
}); 

Answer 4

Eine Alternative zu dem geplanten Implementierung wäre ein Onclick-Attribut für jedes div hinzuzufügen und dann zu verfolgen, was div in der Funktion Onclick genannt geklickt wurde. Der Code würde wie folgt aussehen:

<div class="thisclass" onclick="yourJavascriptFunction(this)"> 
    HTML 
</div> 

Die diese Sie als Parameter an Ihre JavaScript-Funktion sendet das DOM-Element sein, das dann geändert werden kann.

Answer 5

Sie haben eine Reihe von Problemen. so werden wir die Grundlagen der Suche beginnen aus dem JavaScript Sie auf dem Laufenden:

Array.from(document.getElementsByClassName('thisclass')).forEach(
    currentNode => currentNode.addEventListener('click', function(){ 
    // do whatever 
    }); 

Oder etwas kurz und bündig:

document.getElementByClassName("thisclass") 
//    ^- typo, the function is: getElementsByClassName 
//     (note the additional 's') 
    .addEventListener("click",function(){ 
    // a NodeList - returned by the getElementsByCLassName() 
    // function has no addEventListener() method, so instead 
    // you have to iterate over all elements in the NodeList 
    // and apply the event-listener to each element individually. 
     //do something with the specific clicked div 
    }); 

So die oben wäre richtig geschrieben werden

document.querySelectorAll('.thisclass').forEach(
    currentNode => currentNode.addEventListener('click', function(){ 
    // do whatever 
    }); 

Welche nutzt die NodeList, die von document.querySelectorAll() mit einer forEach() Methode zurückgegeben wird, während die zurückgegebene Live NodeList zurückgegeben von document.getElementsByClassName() nicht tut t.

Der andere Teil des Problems ist, dass Sie die Ereignis-Listener zu den Elementen hinzufügen möchten, die noch nicht im Dokument vorhanden sind.

Da JavaScript Ereignis-Listener nicht direkt an Elemente binden kann, die dem Dokument hinzugefügt werden, nachdem die Ereignis-Listener gebunden sind, müssen wir stattdessen den Ereignis-Listener zu einem vorhandenen Vorgängerelement auf der Seite hinzufügen zu den Elementen selbst.

// caching references to various elements for later use: 
let button = document.querySelector('button'), 
    ancestor = document.body; 

// named function to add new elements to the page; 
// the first argument is the 'event' Object, 
// passed automagically from the addEventListener() 
// method: 
function addNewElement(event) { 

    // because we're using the ancestor element of 
    // the <button> to listen for the same 'click' 
    // event, here we use event.stopPropagation() 
    // to avoid that click bubbling up through the 
    // document: 
    event.stopPropagation(); 

    // we find the first element matching the supplied 
    // selector (or if no such element exists this 
    // will return null; so in production it's sensible 
    // to check the element exists): 
    let newElement = document.querySelector('.thisclass') 

    // and then we clone that Node: 
    .cloneNode(true); 

    // this is passed automagically from the 
    // addEventListener() method, and refers to 
    // the element on which the event-listener 
    // was fired; here we find the <button> 
    // element's parentNode and use the 
    // parentNode.appendChild() method to add 
    // the newly-created element to the document: 
    this.parentNode.appendChild(newElement); 

    // here we explicitly add a class to the 
    // dynamically added content, just to be 
    // explicit that it's a newly-added element: 
    newElement.classList.add('dynamicallyAdded'); 
} 

// a simple named function to demonstrate 
// simple functionality: 
function handleThisclassClicks(event) { 

    // the event.target is the Node upon which 
    // the listened-for event was originally 
    // fired: 
    let target = event.target; 

    // here we simply toggle the 'active' 
    // class on the clicked element: 
    target.classList.toggle('active'); 
} 

// binding the named ('addNewElement()') function 
// as the event-handler for the click event on 
// the button Node (note the deliberate lack of 
// parentheses): 
button.addEventListener('click', addNewElement); 

// binding the named function as the event-handler for 
// the click event fired on the ancestor Node (which is, 
// again, why we used event.stopPropagation() in the 
// button Node's click-handler): 
ancestor.addEventListener('click', handleThisclassClicks); 

let button = document.querySelector('button'), 
 
    ancestor = document.body; 
 

 
function addNewElement(event) { 
 
    event.stopPropagation(); 
 
    let newElement = document.querySelector('.thisclass') 
 
    .cloneNode(true); 
 
    this.parentNode.appendChild(newElement); 
 
    newElement.classList.add('dynamicallyAdded'); 
 
} 
 

 
function handleThisclassClicks(event) { 
 
    let target = event.target; 
 

 
    target.classList.toggle('active'); 
 
} 
 

 
button.addEventListener('click', addNewElement); 
 

 
ancestor.addEventListener('click', handleThisclassClicks);

div { 
 
    color: red; 
 
    margin-left: 0; 
 
    transition: color 0.5s linear, margin-left 1s linear; 
 
} 
 

 
div.active { 
 
    color: limegreen; 
 
    margin-left: 1em; 
 
} 
 

 
.dynamicallyAdded::after { 
 
    content: '*'; 
 
}

<button>Add another '.thisclass' element</button> 
 
<div class="thisclass"> 
 
    HTML 
 
</div> 
 

 
<div class="thisclass"> 
 
    HTML 
 
</div> 
 

 
<div class="thisclass"> 
 
    HTML 
 
</div>

Referenzen:

• Array.from()

  Als einfaches Beispiel kann die Verwendung eines zugesetzten Elements <button> Herstellung neuer Elemente hinzuzufügen.

• Array.forEach().
• document.getElementsByClassName().
• document.querySelector().
• document.querySelectorAll().
• Element.classList API.
• Event interface.
• Event.stopPropagation().
• Event.target.
• EventTarget.addEventListener().
• Node.parentNode.
• JavaScript Arrow functions.
• NodeList.forEach().

Bibliographie:

• Walton, Philip "The Dangers of Stopping Event Propagation", veranstaltet von CSS Tricks, zugegriffen: 14.40, 2017.07.10.