javascript - 将元素 ID 输出到控制台

Question

我想在点击浏览器控制台时输出元素的 ID，但是我不知道如何以字符串格式执行此操作 - 目前输出为空。

HTML:

<div id = "1" class = "column">
    <a href="javascript:;" onclick="addClassToImage(this)"> <img class="img-class" src="https://manilva.club/wp-content/uploads/2019/04/By-Product.png" alt="By Product" /></a>
 </div>

JavaScript:

function addClassToImage(element) 
  {
    var innerImage = element.querySelector('img');
    var id  = element.id;
    if(innerImage) 
    {
      if(innerImage.classList.contains('clicked')) 
      {
        innerImage.classList.remove('clicked');
      }
      else 
      {
        innerImage.classList.add('clicked');
        console.log(id);
      }
    }
}

Answer 1

根据您当前的代码，只有父元素具有 id 属性，您正在尝试获取被单击元素的 id，而不是先获取父节点再获取其 id。使用 Node#parentNode 可以获取父节点引用的位置节点的属性。

function addClassToImage(element) {
  var innerImage = element.querySelector('img');
  // get parent node and then its id
  var id = element.parentNode.id;
 
  if (innerImage) {
    if (innerImage.classList.contains('clicked')) {
      innerImage.classList.remove('clicked');
    } else {
      innerImage.classList.add('clicked');
      console.log(id);
    }
  }
}

<div id="1" class="column">
  <a href="javascript:;" onclick="addClassToImage(this)"> f<img class="img-class" src="https://manilva.club/wp-content/uploads/2019/04/By-Product.png" alt="By Product" /></a>
</div>

---

更新: 如果您想获取具有 id 属性的最近祖先的 id，请使用 Node#closest方法与 CSS has attribute selector (如 @T.J.Crowder 所建议)。

function addClassToImage(element) {
  var innerImage = element.querySelector('img');
  // get parent node and then its id
  var id = element.closest('[id]').id;
 
  if (innerImage) {
    if (innerImage.classList.contains('clicked')) {
      innerImage.classList.remove('clicked');
    } else {
      innerImage.classList.add('clicked');
      console.log(id);
    }
  }
}

<div id="1" class="column">
  <a href="javascript:;" onclick="addClassToImage(this)"> f<img class="img-class" src="https://manilva.club/wp-content/uploads/2019/04/By-Product.png" alt="By Product" /></a>
</div>