JavaScript add click event to unknown amount of items


I have a list of elements, which can have x items in it. Every item is just a link element and every element has it’s own layer, which is set to display=none by default and should be set to display=flex if you click on the link.

Since every item has it’s specific layer and we have an unknown amount of them I need to do this more dynamically than just iterate all over the elements, but I don’t really know how I should approach this right now, so maybe someone can help me with this?

My HTML (Twig) Code looks like this. The a tag with the classes "content__country content__country–{{ key }}" is the link element which should be connected to it’s specific layer. The layer is the div element with the classes "contact-layer contact-layer–{{ key }}".

<div class="contact-international__content">
    {% for letter in internationalDemoData %}
        <div class="contact-international__sort-box">
            <div class="sort-box__title">
                <p class="box-title__text">{{ letter.title }}</p>
            </div>

            <div class="sort-box__content">
                {% for key, country in letter.countries %}
                    <a class="content__country content__country--{{ key }}" href="javascript:void(0)">{{ country.title }}</a>
                    <div class="contact-layer contact-layer--{{ key }}" style="display: none;">
                        <div class="contact-layer__box">
                            <div class="contact-layer__close">
                                <div class="list-group-item layer-close__icon">
                                    <span class="layer-close__on-click">
                                        {% sw_icon 'close' style {'pack': 'custom'} %}
                                    </span>
                                </div>
                            </div>
                            <div class="box__content">
                                <p class="box__country">{{ country.title }}</p>
                                {% for contact in country.contactData %}
                                    <p class="box__contact-information">
                                        <span class="contact-information__company">{{ contact.company }}</span>{% sw_icon 'pointer' style {'pack': 'custom'} %}<br/>
                                        {{ contact.address }}<br/>
                                        {{ contact.addressExtra }}<br/>
                                        {{ contact.city }}<br/>
                                        Telefon: {{ contact.phoneNo }}<br/>
                                        Telefax: {{ contact.fax }}<br/>
                                        <a href="mailto:{{ contact.email }}">{{ contact.email }}</a>
                                    </p>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endfor %}
</div>

Source: JavaSript – Stack Overflow

November 9, 2021
Category : News
Tags: javascript | onclick

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.