Как взять атрибут href и использовать его в div при нажатии на него?

Question

В javascript я хочу сказать post-container, что когда я нажимаю на него, возьмите href, расположенный в link и перейдите на страницу 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>

Я хочу иметь возможность нажимать за пределами Hello, world! заголовок моего поста в любой области post-container и переход на страницу X

Есть идеи как это сделать?

Answer 1

Надеюсь, я правильно интерпретирую ваш вопрос, но вы можете просто переставить место, где пишете тег 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>

Answer 2

Это будет работать. Добавьте прослушиватель события к родительскому элементу ( Делегирование события ). Вы можете взять свойство href дочернего элемента и затем использовать window.location.href. Возможно, вам потребуется добавить preventDefault(), чтобы избежать поведения по умолчанию a tag

Если у вас есть несколько тегов с одним и тем же именем класса. Вы должны использовать 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 3

Если у вас есть несколько .post-container с, вам нужно будет выполнить итерацию по каждому из них и добавить прослушиватель событий для обработки событий щелчка. При нажатии найдите 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 4

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

Чек рабочая демонстрация

Answer 5

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