通过onclick属性将引用的父div id传递给js函数

Question

我想从特定的父div获得子div的元素。我的div可能具有相同的id，即id="petAttribute。我要做的是遍历宠物详细信息列表，将它们的信息存储在卡片中，当我单击卡片中的按钮时，它将提醒特定卡片的内容。

我的代码中的问题是，我成功地提示了宠物的名字，但是当我点击另一张卡片时，它没有提示我点击的卡片的名字。

function pet(){

let petAttribute = document.getElementById("petAttribute").children;
let petname = petAttribute[0].innerHTML;
alert(petname);
}

* {
box-sizing: border-box;
}

body {
font-family: Arial, Helvetica, sans-serif;
}

/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}

/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
background-color: #f1f1f1;
}
img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid black;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 3px 3px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 2px 2px;
cursor: pointer;
}

h2>Choose your pet to groom</h2>
<div class="row">
<div class="column">
<div class="card" id="petcard">
<img src="https://logowik.com/content/uploads/images/t_cat8600.jpg" alt="Paris" width="300" height="300">
<div id = "petAttribute">
<div id="name">Nomi</div>
<div id="breed">Domestic Long Hair</div>
<div id="age">Adult</div>
</div>
<input type="button" class="button" value="Groom my pet"  onclick="pet()">

</div>
</div>
<div class="row">
<div class="column">
<div class="card" id="petcard">
<img src="https://logowik.com/content/uploads/images/t_cat8600.jpg" alt="Paris" width="300" height="300">
<div id="petAttribute">
<div id="name">kuchi</div>
<div id="breed">Domestic short Hair</div>
<div id="age">kitten</div>
</div>
<input type="button" class="button" value="Groom my pet" onclick="pet()">
</div>
</div>

Answer 1

首先，id必须是唯一的。getElementById方法总是返回具有所需ID的第一个元素。(这就是为什么无论你点击哪个按钮，你总是得到名字的原因。)所以你最好使用classes:

<h2>Choose your pet to groom</h2>
<div class="row">
<div class="column">
<div class="card petcard">
<img src="https://logowik.com/content/uploads/images/t_cat8600.jpg" alt="Paris" width="300" height="300">
<div class="petAttribute">
<div class="name">Nomi</div>
<div class="breed">Domestic Long Hair</div>
<div class="age">Adult</div>
</div>
<input type="button" class="button" value="Groom my pet">
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="card petcard">
<img src="https://logowik.com/content/uploads/images/t_cat8600.jpg" alt="Paris" width="300" height="300">
<div class="petAttribute">
<div class="name">kuchi</div>
<div class="breed">Domestic short Hair</div>
<div class="age">kitten</div>
</div>
<input type="button" class="button" value="Groom my pet">
</div>
</div>
</div>

第二，如果不向应该打印名称的函数传递任何信息，则至少需要关于单击了哪个按钮的信息。然后，您可以从该按钮直接导航到包含该名称的元素。一种方法如下:

document.querySelectorAll("input.button").forEach(button => {
button.addEventListener("click", function() {
let petAttribute = button.parentElement.querySelector(".petAttribute");
let petname = petAttribute.querySelector(".name").textContent;
alert(petname);
});
});