Как с помощью скрипта скопировать и применить к блоку более одного атрибута из ссылки

Question

Здравствуйте!

Есть следующая конструкция:

$(document).ready(function() {
  $('.block').click(function() {
    window.location = $(this).find('a').attr('href');
    return false;
  })
});

.block {
  cursor: pointer;
  border-radius: 10px;
  padding: 20px 40px;
  margin: 10px 10px;
  background: #f5f5f5;
  display: inline-block;
  width: 150px;
  text-align: center;
}

.block:hover {
  background: #f1f1f1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="block">
  <p>Водитель "БелАЗа" смотрит на дорожные знаки чисто из любопытства.</p>
  <a target="_blank" href="https://yandex.ru">Текст ссылки </a></div>
<div class="block">
  <p>Неприятно наступать на грабли, еще неприятнее наступать на детские грабли.</p>
  <a target="_blank" href="https://google.com">Текст ссылки </a></div>

Скрипт в примере позволяет кликнуть по любой области блока с классам block внутри которого расположена ссылка и соответственно перейти по ссылке. Как изменить скрипт, чтобы он не только копировал атрибут href, но также копировал и применял атрибут target чтобы при клике по блоку ссылка открывалась в новом окне.

Благодарю за ответ!

Answer 1

.block {
  cursor: pointer;
  border-radius: 10px;
  padding: 20px 40px;
  margin: 10px 10px;
  background: #f5f5f5;
  display: inline-block;
  width: 150px;
  text-align: center;
}

.block:hover {
  background: #f1f1f1;
}

<a target="_blank" href="https://yandex.ru">
  <div class="block">
    <p>Водитель "БелАЗа" смотрит на дорожные знаки чисто из любопытства.</p>
    Текст ссылки </div>
</a>
<a target="_blank" href="https://google.com">
  <div class="block">
    <p>Неприятно наступать на грабли, еще неприятнее наступать на детские грабли.</p>
    Текст ссылки </div>
</a>

$(document).ready(function() {
  $('.block').click(function() {
    window.open($(this).find('a').attr('href'));
    return false;
  })
});

.block {
  cursor: pointer;
  border-radius: 10px;
  padding: 20px 40px;
  margin: 10px 10px;
  background: #f5f5f5;
  display: inline-block;
  width: 150px;
  text-align: center;
}

.block:hover {
  background: #f1f1f1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="block">
  <p>Водитель "БелАЗа" смотрит на дорожные знаки чисто из любопытства.</p>
  <a target="_blank" href="https://yandex.ru">Текст ссылки </a></div>
<div class="block">
  <p>Неприятно наступать на грабли, еще неприятнее наступать на детские грабли.</p>
  <a target="_blank" href="https://google.com">Текст ссылки </a></div>

Answer 2

Как вариант, мы создаем новую ссылку, куда перетягиваем все атрибуты вашей и происходит автоматическое нажатие. Не важно что будет передано, все можно перехватить. Код представлен ниже:

$(document).ready(function() {
  $('.block').click(function() {
    var a = document.createElement("a");
    a.href = $(this).find('a').attr('href');  
        var target = $(this).find('a').attr('target');
if (target === undefined){
    target = '_self';
}
    a.target= target;
        a.click();
    return false;
  })
});

.block {
  cursor: pointer;
  border-radius: 10px;
  padding: 20px 40px;
  margin: 10px 10px;
  background: #f5f5f5;
  display: inline-block;
  width: 150px;
  text-align: center;
}

.block:hover {
  background: #f1f1f1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="block">
  <p>Водитель "БелАЗа" смотрит на дорожные знаки чисто из любопытства.</p>
  <a target="_blank" href="https://yandex.ru">Текст ссылки </a></div>
<div class="block">
  <p>Неприятно наступать на грабли, еще неприятнее наступать на детские грабли.</p>
  <a target="_self" href="https://google.com">Текст ссылки </a></div>

Только что проверил, если не указывать target, то тоже работает

<a href="https://google.com">Текст ссылки </a></div>

БЛОГ НА HUSL

Как с помощью скрипта скопировать и применить к блоку более одного атрибута из ссылки

Ответы (2 шт):