Копирование URL-адреса <article>для клика по всей статье div с помощью jQuery - PullRequest
0 голосов
/ 17 октября 2018

У меня есть список статей, таких как:

<article>
  <a class="title" href="http://somelink1.com">Some Link</a>
  <p>content</p>
</article>

<article>
  <a class="title" href="http://somelink2.com">Some Link</a>
  <p>content</p>
</article>

<article>
  <a class="title" href="http://somelink3.com">Some Link</a>
  <p>content</p>
</article>

Я пытаюсь получить атрибут href и скопировать его в каждый <article> как onClick.

У меня есть этот jQuery, который почти работает, но он использует только URL первой статьи для всех остальных.

$("article").each(function() {
  var copyLink = $("a.title").attr("href");
  $(this).click(function() {
    window.location = copyLink;
  });
});

Помогите, пожалуйста!

Ответы [ 2 ]

0 голосов
/ 17 октября 2018

Вам необходимо перейти к тегу .title для каждой статьи..find(".title")

$(document).ready(function() {
  $("article").each(function() {
    var copyLink = $(this).find(".title").attr("href");
    
    $(this).click(function() {
      window.location = copyLink;
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
  <a class="title" href="http://somelink1.com">Some Link</a>
  <p>content</p>
</article>

<article>
  <a class="title" href="http://somelink2.com">Some Link</a>
  <p>content</p>
</article>

<article>
  <a class="title" href="http://somelink3.com">Some Link</a>
  <p>content</p>
</article>
0 голосов
/ 17 октября 2018

Чтобы jQuery больше не занимал только первую ссылку, вам нужно заставить его искать в текущем элементе $ .each

var copyLink = $(this).find("a.title").attr("href");

Чтобы заставить ваш скрипт работать, вы можете сделать что-то вроде этого:

$("article").each(function() { $(this).click(function() { window.location =  $(this).find("a.title").attr("href"); }); });

Я прошу прощения за любые опечатки.Я написал ответ со своего телефона.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...