Question

我得到了这段代码。

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}}

它正在从目录中的json文件中获取数据。

我希望类'bigProjDesc'首先被隐藏，然后在用户单击<img>标签后显示。

我目前正在使用香草JS / CSS / Express-Handlebars。

Answer 1

这很简单：

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>

注意：我更改了标记，以使此示例在浏览器中运行。该代码是在ES6中给出的，但应该易于翻译成ES5

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

1 个答案: