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

Question

[Andrey Dontsov]

Привет
Несколько секций с разными товарами, в секции две кнопки "купить" и "в корзину".
Товары разные, соответственно атрибут href у кнопок "в корзину" разный.

Как с помощью js скопировать значение атрибута href кнопки "в корзину" в href кнопки "купить" с учетом их родительской секции?
Т.е. так, чтобы при клике на "купить" товар добавлялся в корзину!

Идея в том, чтобы после добавления товара в корзину кнопкой "купить" затем редиректнуть на страницу заказа, а поведение кнопки "в корзину" оставить без изменений, т.е. просто добавить в корзину.

<section class="buy_and_to_card">
   <a href="" class="checkout-button">купить</a>
   <a href="/?add-to-cart=103" class="checkout-button">в корзину</a>
</section>

<section class="buy_and_to_card">
   <a href="" class="checkout-button">купить</a>
   <a href="/?add-to-cart=111" class="checkout-button">в корзину</a>
</section>

Answer 1

[sunrails]

Если делать проще:

<section class="buy_and_to_card">
   <a href="/?add-to-cart=111" class="checkout-button checkout-button-buy">купить</a>
   <a href="/?add-to-cart=111" class="checkout-button">в корзину</a>
</section>

$('checkout-button').on('click', function() {
// отправляем ajax запрос на добавление
// при success проверяем есть ли класс checkout-button-buy у элемента и решаем что дальше делать
})

Comments

[Andrey Dontsov]

все не так просто, вы скопировали href кнопки "в корзину" в href кнопки "купить", но в этом и состоит мой вопрос, если можно подскажите решение как получить значение href "в корзину" скриптом и добавить его в href "купить".
Значение href="/?add-to-cart=111" для каждого товара свое и динамически подставляется php скриптом woocommerce, там целая цепочка событий в разных файлах шаблона и т.д.
Нужно получить значение одной ссылки и присвоить его другой, если можете подсказать - буду очень признателен! Спасибо

[sunrails]

https://jsfiddle.net/nL2m1sex/1/

[Andrey Dontsov]

sunrails: то что нужно! спасибо!

Answer 2

[vruzin]

Проще всего использовать jquery:

$(document).on( "click", 'a.checkout-button', function(e){
         // Скрипт добавления в корзину.
        e.preventDefault(); // отключение перехода по ссылке
});

В Вашем коде рекомендую сделать вид вот такой:

<section class="buy_and_to_card">
   <a href="" class="checkout-button">купить</a>
   <a href="/?add-to-cart=103" class="checkout-button add-button">в корзину</a>
</section>

тогда javascript будет

$(document).on( "click", 'a.checkout-button', function(e){
         switch(true){
                  case ($(this).is('.add-button')): // Тут код для действия "в корзину". $(this).attr('href') даст значение ссылки
                  break;
                  default: //Тут код для действия "купить"
         }
         e.preventDefault();
});

Comments

[Andrey Dontsov]

Спасибо за ответ. Правда, понадобится очень много времени, чтобы объяснить ситуацию, если можно, буду признателен, подскажите как получить значение href ссылки "в корзину" и присвоить его ссылке "купить", с учетом того, что они находятся в одной секции. Для меня это решение.
Нет самописного скрипта добавления в корзину, это делает woocommerce, php динамически формирует значение href="/?add-to-cart=111" и там не одна команда для вывода значения, а целая цепочка событий, в разных файлах шаблона и т.д. и т.п.
Мне достаточно скриптом получить значение атрибута и подставить его в значение ссылки "купить", но важно учитывать родительскую т.е. если кликнуть по "купить" в одной секции, нужно получить href ссылки "в корзину" этой же секции.
Если можно, посоветуйте как, спасибо!