Добавление функции onclick к go для URL-кода

Question

Я использую этот код для получения URL от "button_url", и мне нужно, чтобы функция onclick действовала как ссылка go на URL.

Я хочу разместить эту кнопку в нескольких местах на та же страница. Проблема в том, что он работает только в одном месте. Как это решить?

<? php $ button_url = get_field ('button_url'); ?>
<script>
jQuery (document) .ready (function ($) {
var button_url = '<? php echo $ button_url; ?> ';
$ ("# myBtn"). attr ("href", button_url);
});
</script>

Код

<a href="" id="myBtn"> button </a>

Answer 1

Я думаю, вы пытаетесь создать несколько элементов с одинаковым идентификатором (#myBtn), что недопустимо (https://www.w3schools.com/tags/att_global_id.asp). Так что если вы измените его на класс (.myBtn), он должен работать.

<? php $ button_url = get_field ('button_url'); ?>
<script>
jQuery (document) .ready (function ($) {
var button_url = '<? php echo $ button_url; ?> ';
$ (".myBtn"). attr ("href", button_url);
});
</script>

<a href="" class="myBtn"> button </a>

Answer 2

просто изменить

$("#myBtn").attr("href", button_url);

на

$("a#myBtn").attr("href", button_url);

Answer 3

Если у вас есть несколько тегов a, вот пример, как разместить ссылку на все ваши теги a. Вам нужно использовать класс, а не идентификатор. Идентификатор уникален на странице

jQuery(document).ready(function($){
var button_url = 'https://stackoverflow.com/'; //your link from php
$ (".myBtn").attr("href", button_url);
});

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

<a href="" class="myBtn"> button 1 </a><br/>
<a href="" class="myBtn"> button 2 </a><br/>
<a href="" class="myBtn"> button 3 </a><br/>
<a href="" class="myBtn"> button 4 </a><br/>
<a href="" class="myBtn"> button 5 </a><br/>

Answer 4

Попробуйте это.

<a href="link1" class="myBtn">button</a>
<a href="link2" class="myBtn">button</a>
<script>
$("body").on("click", ".myBtn", function(){
window.location = $(this).attr("href");
});
</script>