如何通过单击同一父div内的图片标签来定位隐藏的div？ Vanilla JS事件监听器

Question

I got this code.

Express-Handlebars:

{{#each bigProjectList}}
    <div class="bigProjIndividual">

        <img src="{{image}}" alt="">

        <div class="bigProjDesc">

            <h5>{{name}}</h5>
            <p>{{tech}}</p>
            <p>{{desc}}</p>

            {{#if web.gitHub}}
            <a href="{{web.github}}"target="_blank"> <img src="/github.png" alt="github"> </a>
            {{/if}}

            {{#if web.website}}
            <a href="{{web.website}}"target="_blank"> <img src="/website.png" alt="github"> </a>
            {{/if}}

        </div>
    </div>
{{/each}}

It is fetching the data from a json file I have in the directory.

I would like the class 'bigProjDesc' to be initially hidden and then shown once the user click on the <img> tag.

I am currently using vanilla JS / CSS / Express-Handlebars.

Answer 1

It's done pretty easy:

 const imgList = document.querySelectorAll('.bigProjIndividual > img'); const imgArray = Array.from(imgList); // or [].slice.call(imgList) const className = 'is--visible'; const toggle = node => () => { let desc = node.nextElementSibling; // or node.parentNode.querySelector('.bigProjDesc') if (desc) { desc.classList.toggle(className); // IE 10 + } } imgArray.forEach(img => { img.addEventListener('click', toggle(img)); }); 

 .bigProjDesc { display: none; } .bigProjDesc.is--visible { display: block; } 

 <div class="bigProjIndividual"> <img src="https://www.fillmurray.com/200/300" alt=""> <div class="bigProjDesc"> <h5>{{name}}</h5> <p>{{tech}}</p> <p>{{desc}}</p> <a href="{{web.github}}"target="_blank"> <img src="/github.png" alt="github"> </a> <a href="{{web.website}}"target="_blank"> <img src="/website.png" alt="github"> </a> </div> </div> 

Note: I changed your markup to make this example run in the browser. The code is given in ES6, but should be easy to translate into ES5