单击时如何获取href属性并在div中使用它？

Question

在javascript中我想告诉post-container，当我点击它时，获取位于link的href并转到第X页。

有多个post-container

我的代码是这样的：

<div class="post-container">
  <a class="link" href="X">
    <h2 class="post-title">Hello, world!</h2>
  </a>
  <div class="date-posts">...</div>
</div>

我希望能够在post-container的任何区域中点击我的帖子的Hello, world!标题之外并转到第X页

知道怎么做吗？

Answer 1

Javascript：

var elements = document.getElementsByClassName('post-container');

var loadLink = function() {

    var link = this.getElementsByTagName("a")[0].href;

    window.location.href = link;

};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', loadLink, false);
}

查看working demo

Answer 2

假设您有多个.post-containers，您需要遍历它们中的每一个并添加一个事件侦听器来处理点击事件。点击后，找到a 获取其href 并设置window.location（我只是在此演示中通过控制台登录）

(function(){
    let elems = document.querySelectorAll(".post-container");
    for (i = 0; i < elems.length; ++i) {
        let el = elems[i];
        el.addEventListener("click", function(e) {
            e.preventDefault();
            let href = el.querySelector("a").getAttribute("href");
            console.log("href",href);
            //window.location.href = href;
        })
    }
})();

<div class="post-container">
  <a class="link" href="X">
    <h2 class="post-title">Hello, world!</h2>
  </a>
  <div class="date-posts">...</div>
</div>
<div class="post-container">
  <a class="link" href="Y">
    <h2 class="post-title">Goodbye world!</h2>
  </a>
  <div class="date-posts">...</div>
</div>

Answer 3

这将起作用。将事件侦听器添加到父元素（Event Delegation）。您可以获取子元素的href 属性，然后使用window.location.href。您可能需要添加preventDefault() 以避免默认a 标签的行为

如果您有多个具有相同类名的标签。您必须使用querySelectorAll。如果您有单个元素或多个具有相同类名的元素，请使用querySelctorAll。

// if you have one tag
let ele = document.querySelectorAll(".post-container")
ele.forEach(element => {
  element.addEventListener("click", function(e) {
    e.preventDefault();
    let href = element.children[0].getAttribute("href")
    window.location.href = href;

  })

})

.post-container {
  background-color: green;
}

<div class="post-container">
  <a class="link" href="X">
    <h2 class="post-title">Hello, world!</h2>
  </a>
  <div class="date-posts">...</div>
</div>

Answer 4

document.getElementsByClassName('post-container')[0].onclick = function(e){
  location.href = this.children[0].href;
}

Answer 5

我希望我正确地解释了您的问题，但是您可以重新安排编写 href 标记的位置。相反，将您的 div 包装在其中。这将使整个 div 元素成为一个链接。

<a class="link" href="google.com">
    <div class="post-container">
        <h2 class="post-title">Hello, World!</h2>
        <div class="date-posts"></div>
    </div>
</a>