通过onClick属性将引用的父级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的第一个元素。 （这就是为什么您始终获得名字，无论您单击哪个按钮。）因此，您最好使用类：

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