Как подставить ссылки для кнопок через атрибут target с помощью JS?

Question

Проблема в следующем, у меня есть несколько кнопок на странице, и нужно каждой из кнопки подставить свою ссылку, ссылки будут находиться в отдельном файле.

У меня получилось заменить ссылку если на странице есть только одна кнопка. как можно доработать скрипт чтобы он проходился по всем кнопкам и каждой подставлял соответствующую ей ссылку?

function refresh(x=false){
    var y = "/new_links/";
        if (x) window.open(y, '_blank'); 

        else
        window.location.href = y;
        return false;
}

у кнопок соответственно есть обработчик onclick="return refresh(true)" и атрибут target="_blank".

я думаю что нужно собрать массив данных где будет соответствие допустим Id кнопки и ссылки которую нужно подставить, но не могу понять как это реализовать.

Answer 1

const wrapper = document.querySelector('.wrapper')

const buttons = [
  {
    name: 'Google',
    id: 1
  },
  {
    name: 'Stackoverflow',
    id: 2
  },
  {
    name: 'LinkedIn',
    id: 3
  }
]

const links = [
  {
    href: 'https://www.google.com/',
    id: 1
  },
  {
    href: 'https://stackoverflow.com/',
    id: 2
  },
  {
    href: 'https://www.linkedin.com/',
    id: 3
  }
]

buttons.forEach(btn => {
  links.forEach(link => {
    if (btn.id === link.id) {
      let html = `
        <a class="btn" href="${link.href}" target="_blank">${btn.name}</a>
      `
      wrapper.innerHTML += html
    }
  })
})

.btn {
  text-decoration: none;
  margin: 10px;
}

<div class="wrapper"></div>

Answer 2

Тут есть несколько вариантов решения и зависит от того, как именно у тебя расставлены кнопки по сайту.

=== Первый вариант ===

Если кнопки находятся в определнном блоке, то достаточно будет сделать так: https://codepen.io/NocteFury/pen/wvMrgpj

В данном случае ты подписываешься на событие лишь в одном блоке, это оптимальнее, чем несколько подписок, да и управлять ими проще, так как для отписки достаточно лишь отписаться только от одной, а не хранить список из всех. Почему это работает можешь почитать тут.

=== Второй вариант ===

Однако, часто бывает необходимо обработать кнопки по всему проекту. Тогда можно использовать document.querySelectorAll() (ссылка на документацию по методу), данный метод позволяет тебе получить список всех элементов по селектору CSS. В данном случае тебе достаточно придумать data-тэг для своих кнопок (например data-id) и создать вот такой селектор: button[data-id]. Такой селектор означает, что нам нужны все кнопки (элемент с тегом button) и у которых в аттрибутах есть data-id (все, что указывается внутри элемента через <name>="<value>"): https://codepen.io/NocteFury/pen/vYLegzJ

БЛОГ НА HUSL

Как подставить ссылки для кнопок через атрибут target с помощью JS?

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