无论如何要简化这个 Javascript 代码

Question

我有这段代码，当单击某张卡片时，其内容会显示在覆盖卡片上。但是我现在拥有它的方式是重复：HTML:        <div class="card c1">            <img src="max.png" width="65px">            <div class="text">                <h3 class="firstName">Owen</h3>                <h3 class="lastName">Osagiede</h3>                 <p>[email]</p>                 <p>[city]</p>            </div>        </div>         <div class="card c2">            <img src="max.png" width="60px">            <div class="text">                <h3 class="firstName">Kanye</h3>                <h3 class="lastName">West</h3>                 <p>[email]</p>                 <p>[city]</p>            </div>        </div>        <div class="card c3">            <img src="max.png" width="65px">            <div class="text">                <h3 class="firstName">Quando</h3>                <h3 class="lastName">Rondo</h3>                 <p>[email]</p>                 <p>[city]</p>            </div>        </div>记者：      function overlayUser(){         card[1].addEventListener('click', function(){           first.innerHTML = card[1].getElementsByTagName('h3')[0].innerHTML;           last.innerHTML = card[1].getElementsByTagName('h3')[1].innerHTML;    });    card[2].addEventListener('click', function(){        first.innerHTML = card[2].getElementsByTagName('h3')[0].innerHTML;        last.innerHTML = card[2].getElementsByTagName('h3')[1].innerHTML;    });    card[3].addEventListener('click', function(){        first.innerHTML = card[3].getElementsByTagName('h3')[0].innerHTML;        last.innerHTML = card[3].getElementsByTagName('h3')[1].innerHTML;    });我试图用 for 循环遍历它，但不断收到错误消息：      `function overlayUser(){          for (i = 0; i < card.length; i++){              card[i].addEventListener('click', function(){                first.innerHTML = card[i].getElementsByTagName('h3')[0].innerHTML;               last.innerHTML = card[i].getElementsByTagName('h3')[1].innerHTML;               });           }        }`

Answer 1

在 DOM 事件处理程序中，当前元素是this. 因此，您可以为所有这些编写一个函数：

function handleClick () {

    first.innerHTML = this.getElementsByTagName('h3')[0].innerHTML;

    last.innerHTML = this.getElementsByTagName('h3')[1].innerHTML;

}

function overlayUser(){

    for (i = 0; i < card.length; i++){

        card[i].addEventListener('click', handleClick);

    }

}

该thisAPI 是用于查明是哪个元素引发了事件的原始 API。因此它与所有浏览器都非常兼容。

或者，如果您对混合使用 感到不自在，this您还可以从事件对象中找出当前元素：

function handleClick (event) {

    let card = event.target;

    first.innerHTML = card.getElementsByTagName('h3')[0].innerHTML;

    last.innerHTML = card.getElementsByTagName('h3')[1].innerHTML;

}

事件对象是一个不太古老的 API，但与 IE8 及更高版本的所有内容兼容。

另外，您可以使用事件冒泡/捕获甚至摆脱 for 循环。只需将事件安装在所有三张卡片的父元素上，然后event.target找出哪张卡片引起了事件：

parentDiv.addEventListener('click', handleClick);

Answer 2

与其循环遍历您希望拥有事件处理程序的所有单个元素并将每个元素连接起来，不如在祖先元素上设置单个处理程序并允许事件冒泡到该元素。然后，在处理它时，查看event.target，它指的是触发事件的实际元素。这称为事件委托。

另外，不要.getElementsByTagName()在 2020 年使用。这是一个已有 25 年以上历史的 API，它会返回一个实时节点列表，这会极大地损害性能，尤其是因为您在使用它时只对单个元素感兴趣。

此外，.innerHTML如果可以避免，切勿使用。它具有安全性和性能影响。由于您实际上并没有使用需要解析任何 HTML 的字符串，因此您应该使用.textContent.

最后，你不应该使用h3，除非它是创建一个预先存在的子部分h2。标题旨在将您的文档划分为有序的部分，这些部分供那些依赖辅助技术来浏览文档的人使用。如果您只是h3因为浏览器应用于文本的样式而使用，您应该只使用 ap然后使用 CSS 以您想要的方式设置样式。

// Get references to first and last (for this demo)

let first = document.querySelector(".first");

let last = document.querySelector(".last");

// Just handle the click event at the wrapper of all the cards

document.querySelector(".wrapper").addEventListener("click", function (event){

   // Then access the content of the card that actaully triggered the event

   first.textContent = event.target.closest(".card").querySelector("h3").textContent;

   last.textContent = event.target.closest(".card").querySelector("h3:nth-child(2)").textContent;

});

/* Just for demo */

.results {

  position:sticky;

  left:50%;

  top:0;

  background-color:#e0e0e0;

  border:2px solid red;

}

<div class="results">

  <div class="first"></div>

  <div class="last"></div>

</div>

<div class="wrapper">

  <div class="card c1">

            <img src="max.png" width="65px">

            <div class="text">

                <h3 class="firstName">Owen</h3>

                <h3 class="lastName">Osagiede</h3> 

                <p>[email]</p> 

                <p>[city]</p>

            </div>

        </div>

 

        <div class="card c2">

            <img src="max.png" width="60px">

            <div class="text">

                <h3 class="firstName">Kanye</h3>

                <h3 class="lastName">West</h3> 

                <p>[email]</p> 

                <p>[city]</p>

            </div>

        </div>

        <div class="card c3">

            <img src="max.png" width="65px">

            <div class="text">

                <h3 class="firstName">Quando</h3>

                <h3 class="lastName">Rondo</h3> 

                <p>[email]</p> 

                <p>[city]</p>

            </div>

        </div>

</div>