Скачать или смотреть How to Efficiently Toggle Classes on Dynamic HTML Elements with JavaScript

Learn how to dynamically toggle classes for multiple elements in JavaScript using event delegation, while excluding specific classes with simple techniques.
---
This video is based on the question https://stackoverflow.com/q/64848665/ asked by the user 'Gillian' ( https://stackoverflow.com/u/6381589/ ) and on the answer https://stackoverflow.com/a/64848719/ provided by the user 'CertainPerformance' ( https://stackoverflow.com/u/9515207/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How can I repeat Javascript expression for elements with different class names

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Efficiently Toggle Classes on Dynamic HTML Elements with JavaScript

When working with dynamic HTML elements, especially those having similar class names with varying numeric suffixes (like myclass-1, myclass-2, etc.), it can be cumbersome to add separate event listeners to each of them. If you find yourself wanting to toggle a class on these elements (excluding a specific class), you might be wondering how to achieve this efficiently.

The Problem: Managing Multiple Classes

In a scenario where you have multiple elements that each carry a class name modeled as myclass-n (where n is a number), you may want to perform an action on them without writing repetitive code. Specifically, your goal might be to add a click event that toggles a different class for any element matching myclass-n, but not myclass-1.

For example:

You have provided dynamic elements:

<div class="myclass-1">Content 1</div>

<div class="myclass-2">Content 2</div>

<div class="myclass-3">Content 3</div>

On clicking myclass-2 or myclass-3, a different class (another-class) should be toggled, altering its appearance.

The Solution: Using Event Delegation

The most effective way to achieve this without repetitive code is through event delegation. This lets you add a single click event listener to the parent element (in this case, window or a specific container). The listener will check if the target element matches your criteria and perform the toggle action accordingly.

Here’s How to Do It:

Add an Event Listener to the Window

Use the matches Method: This helps in selecting the element based on your defined class criteria.

Use the :not() Selector: To exclude the specific class you don’t want to interact with.

Implementation Steps:

Here is the code to achieve this:

[[See Video to Reveal this Text or Code Snippet]]

Explanation:

window.addEventListener('click', ...): This line adds a click event listener to the entire window.

e.target.matches('[class^="myclass"]:not(.myclass-1)'): This checks if the clicked element's class starts with myclass and does not include myclass-1.

e.target.classList.toggle('another-class'): If the condition is met, it toggles the presence of another-class on the clicked element, which can change its style.

CSS Example:

You can style the toggle class like this:

[[See Video to Reveal this Text or Code Snippet]]

HTML Example:

Ensure your markup looks something like this:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By utilizing event delegation and dynamic class matching with the matches() function, you streamline the process of toggling classes on various elements without the need for individual event listeners. This method enhances code efficiency and maintains clarity, particularly when dealing with potentially unlimited elements.

Feel free to customize your classes and styling as needed, and enjoy coding with cleaner and more maintainable JavaScript!