首頁猿問無論如何要簡化這個...

無論如何要簡化這個 Javascript 代碼

JavaScript

SMILET 2023-02-17 16:50:20

我有這段代碼，當單擊某張卡片時，其內容會顯示在覆蓋卡片上。但是我現在擁有它的方式是重復：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; }); } }`

查看完整描述

2 回答

湖上湖

TA貢獻2003條經驗獲得超2個贊

在 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);

反對回復 2023-02-17

繁星coding

TA貢獻1797條經驗獲得超4個贊

與其循環遍歷您希望擁有事件處理程序的所有單個元素并將每個元素連接起來，不如在祖先元素上設置單個處理程序并允許事件冒泡到該元素。然后，在處理它時，查看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>

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

<p>[email]</p>

</div>

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

<p>[email]</p>

</div>

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

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

<p>[email]</p>

</div>

反對回復 2023-02-17

2 回答
0 關注
118 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

無論如何要簡化這個 Javascript 代碼

無論如何要簡化這個 Javascript 代碼

2 回答

添加回答