Как при клике на button менять у ссылки data-rel=""?

Question

[amartynyuk]

Как менять у ссылки data-rel="" при клике на button?

Нынешний код:

<button  class="cve"  onclick="document.getElementById('bodyone').data-rel='69c99408142132'">S</button>
<button  class="cve"  onclick="document.getElementById('bodyone').data-rel='69c99408143167'">M</button>  
<button  class="cve"  onclick="document.getElementById('bodyone').data-rel='69c99408143177'">L</button> 
<a class="btn-ens-action btn-ens-style" id="bodyone" data-rel="69c99408142132"> в корзину </a>

Answer 1

[0xD34F]

Кнопки надо изменить - вырезаем инлайновые обработчики клика, значения для data-rel ссылки кладём в аналогичный атрибут:

<button class="cve" data-rel="69c99408142132">S</button>
<button class="cve" data-rel="69c99408143167">M</button>  
<button class="cve" data-rel="69c99408143177">L</button>

Дальше можно сделать делегированный обработчик клика, в котором будем пытаться подняться от целевого элемента к ссылке (в вашем случае было бы достаточно проверки наличия класса - if (t.classList.contains('cve')), но кто его знает, может, решите в будущем добавить внутрь кнопок ещё какие-то элементы):

document.addEventListener('click', function({ target: t }) {
  if (t = t.closest('.cve')) {
    this.setAttribute('data-rel', t.getAttribute('data-rel'));
  }
}.bind(document.getElementById('bodyone')));

Или, есть вариант назначать обработчик клика непосредственно каждой кнопке:

const link = document.querySelector('#bodyone');
const onClick = e => link.dataset.rel = e.currentTarget.dataset.rel;
document.querySelectorAll('.cve').forEach(n => n.addEventListener('click', onClick));

Comments

[amartynyuk]

Спасибо

Если есть время, подскажите - inco.best
Скрипт добавил, (1 товар) - перестал работать скрипт добавление в корзину (видит пустой ) data-rel="

[0xD34F]

amartynyuk,

jQuery('#bodyone').data('rel', e.target.dataset.rel);

Какого чёрта две разных jq подключены? Разберитесь.

Answer 2

[Глеб Варганов]

Можно так:

$(document).on('click','button.cve', function(){
    var datarel = $(this).attr("data-rel");
    $("#bodyone").attr('data-rel', datarel)
});

вот jsfiddle:

Comments

[amartynyuk]

Спасибо

Если есть время, подскажите - inco.best
Скрипт добавил, (1 товар) - перестал работать скрипт добавление в корзину (видит пустой ) data-rel=

[Глеб Варганов]

Попробуй через console.log полови переменные и найди что не подхватывает

Answer 3

[Stanislav Namytov]

Как вариант.