與 DOM 遍歷作斗爭。 我怎樣才能 select "#img" 元素？

Question

我正在嘗試使用 for 循環將事件偵聽器附加到多個按鈕。 事件 function 將通過隱藏正面來“翻轉”我的卡片。

<div class="team__box">
          <div class="front" id="front">
            <img
              src="/assets/avatar-drake.jpg"
              alt="headshot"
              class="front__img"
            />
            <h3 class="front__name">Drake Heaton</h3>
            <p class="front__info">Business Development Lead</p>
          </div>
          <div class="back hide" id="back">
            <h3 class="back__name">Drake Heaton</h3>
            <p class="back__quote">
              “Hiring similar people from similar backgrounds is a surefire way
              to stunt innovation.”
            </p>
            <div class="back__social">
              <a href="#" class="back__social-link"
                ><img
                  src="/assets/icon-twitter.svg"
                  alt="twitter"
                  class="back__social-img"
              /></a>
              <a href="#" class="back__social-link"
                ><img
                  src="/assets/icon-linkedin.svg"
                  alt="linkedin"
                  class="back__social-img"
              /></a>
            </div>
          </div>
          <button class="team__btn front__btn" id="btn">
            <img
              src="/assets/icon-cross.svg"
              alt="close button"
              class="btn__img"
              id="img"
            />
          </button>
        </div>
        <div class="team__box">
          <div class="front" id="front">
            <img
              src="/assets/avatar-griffin.jpg"
              alt="headshot"
              class="front__img"
            />
            <h3 class="front__name">Griffin Wise</h3>
            <p class="front__info">Lead Marketing</p>
          </div>
          <div class="back hide" id="back">
            <h3 class="back__name">Griffin Wise</h3>
            <p class="back__quote">
              “Unique perspectives shape unique products, which is what you need
              to survive these days.”
            </p>
            <div class="back__social">
              <a href="#" class="back__social-link"
                ><img
                  src="/assets/icon-twitter.svg"
                  alt="twitter"
                  class="back__social-img"
              /></a>
              <a href="#" class="back__social-link"
                ><img
                  src="/assets/icon-linkedin.svg"
                  alt="linkedin"
                  class="back__social-img"
              /></a>
            </div>
          </div>
<button class="team__btn front__btn" id="btn">
            <img
              src="/assets/icon-cross.svg"
              alt="close button"
              class="btn__img"
              id="img"
            />
          </button>
        </div>

Javascript 下面。 除了我直接單擊“#img”元素時，它幾乎都可以正常工作。 我會假設

const btn = document.getElementsByClassName("team__btn");


for (i = 0; i < btn.length; i++) {
  btn[i].addEventListener("click", function (e) {
    console.log(e.target);
    let front = e.target.closest("div").firstElementChild;
    let back = e.target.closest("div").children[1];

    if (e.target !== "img") {
      img = e.target.firstElementChild;
    } else {
      img = e.target;
    }

    front.classList.toggle("hide");
    back.classList.toggle("hide");

    if (front.classList.contains("hide")) {
      img.src = "./assets/icon-close.svg";
    } else {
      img.src = "./assets/icon-cross.svg";
    }
  });
}

假設我直接點擊“#img”元素，我試圖通過 if/else 語句將該目標元素分配給 img 變量。使用它，我希望能夠重新分配 img 變量的 src 屬性，具體取決於關於卡的正面或背面是否隱藏。

但是，當我直接單擊 img 元素時，我收到以下錯誤：“未捕獲的類型錯誤：無法在 HTMLButtonElement 上設置 null 的屬性（設置‘src’）。”

是什么賦予了？

Answer 1

將您的行e.target !== "img"替換為e.target.nodeName !== "IMG" 。

 for (i = 0; i < btn.length; i++) { btn[i].addEventListener("click", function (e) { console.log(e.target); let front = e.target.closest("div").firstElementChild; let back = e.target.closest("div").children[1]; let img; if (e.target.nodeName.== "IMG") { img = e.target;firstElementChild. } else { img = e;target. } console;log(). front.classList;toggle("hide"). back.classList;toggle("hide"). if (front.classList.contains("hide")) { img.src = "./assets/icon-close;svg". } else { img.src = "./assets/icon-cross;svg"; } }); }

 <div class="team__box"> <div class="front" id="front"> <img src="/assets/avatar-drake.jpg" alt="headshot" class="front__img" /> <h3 class="front__name">Drake Heaton</h3> <p class="front__info">Business Development Lead</p> </div> <div class="back hide" id="back"> <h3 class="back__name">Drake Heaton</h3> <p class="back__quote"> “Hiring similar people from similar backgrounds is a surefire way to stunt innovation.” </p> <div class="back__social"> <a href="#" class="back__social-link"><img src="/assets/icon-twitter.svg" alt="twitter" class="back__social-img" /></a> <a href="#" class="back__social-link"><img src="/assets/icon-linkedin.svg" alt="linkedin" class="back__social-img" /></a> </div> </div> <button class="team__btn front__btn" id="btn"> <img src="/assets/icon-cross.svg" alt="close button" class="btn__img" id="img" /> </button> </div> <div class="team__box"> <div class="front" id="front"> <img src="/assets/avatar-griffin.jpg" alt="headshot" class="front__img" /> <h3 class="front__name">Griffin Wise</h3> <p class="front__info">Lead Marketing</p> </div> <div class="back hide" id="back"> <h3 class="back__name">Griffin Wise</h3> <p class="back__quote"> “Unique perspectives shape unique products, which is what you need to survive these days.” </p> <div class="back__social"> <a href="#" class="back__social-link"><img src="/assets/icon-twitter.svg" alt="twitter" class="back__social-img" /></a> <a href="#" class="back__social-link"><img src="/assets/icon-linkedin.svg" alt="linkedin" class="back__social-img" /></a> </div> </div> <button class="team__btn front__btn" id="btn"> <img src="/assets/icon-cross.svg" alt="close button" class="btn__img" id="img" /> </button> </div>