Нажатие на ссылку вызывает нажатие на другие ссылки с таким же data-value

120

31 января 2020, 12:00

Коллеги, прошу помочь, сломал всю голову.

На сайте есть блок с торговыми предложениями, при клике на цвет меняется картинка, это делает битрикс стандартными свойствами. Тут все гуд!

<div class="elementSkuProperty" data-name="TSVET" data-level="1" data-highload="Y"> 
<div class="elementSkuPropertyName">Цвет:</div> 
<ul class="elementSkuPropertyList"> 
  <li class="elementSkuPropertyValue selected" data-name="TSVET" data-value="98b599f3-9461-11e7-8fae-e61f13e71297"> 
  <a href="#" class="elementSkuPropertyLink">Венге</a> 
  </li> 
  <li class="elementSkuPropertyValue" data-name="TSVET" data-value="98b599f5-9461-11e7-8fae-e61f13e71297"> 
  <a href="#" class="elementSkuPropertyLink">Дуб</a> 
  </li> 
</ul> 
</div>

Но ниже есть еще один блок, он схож по смыслу, он выводит связанные товары

<div class="skuProperty" data-name="TSVET" data-level="1" data-highload="Y"> 
<div class="skuPropertyName">Цвет</div> 
  <ul class="skuPropertyList"> 
    <li id="#skuPropertyValue" class="skuPropertyValue selected" data-name="TSVET" data-value="98b599f3-9461-11e7-8fae-e61f13e71297"> 
    <a href="#" class="skuPropertyLink">Венге Магия</a> 
    </li> 
    <li id="#skuPropertyValue" class="skuPropertyValue" data-name="TSVET" data-value="98b599f5-9461-11e7-8fae-e61f13e71297"> 
    <a href="#" class="skuPropertyLink">Дуб каньон</a> 
    </li> 
  </ul> 
</div>

Вопрос в чем, как можно средствами Jqery, реализовать что при нажатии пользователем в верхнем блоке на цвет (венге или дуб), скрипт нажимает на кнопку в нижнем блоке с таким же цветом?

Тут у тега li есть уникальный атрибут

data-value="98b599f5-9461-11e7-8fae-e61f13e71297"

Такая реализация нужна т.к. на этих кнопках уже висят обработчики. Добавление класса selected не помогает, т.к. нужно именно нажатие, т.е. запуск другого скрипта.

Другими словами: клик на li class="elementSkuPropertyValue" с data-value="98b599f3-9461-11e7-8fae-e61f13e71297" скрипт делает клик на li id="#skuPropertyValue" с data-value="98b599f3-9461-11e7-8fae-e61f13e71297"

Answer 1

В jquery есть метод trigger, его и пробуйте использовать. Что-то типо такого:

$(function() {
    $('.elementSkuPropertyValue ').on('click', function() {
         var value = $(this).data('value');
         $('#skuPropertyValue[data-value=\''+ value + '\']').trigger('click')
    })
 })

Answer 2

после клика на сыслку, в javascript ловите этот event, и в callback функции пропишите return false, либо preventDefault();

Answer 3

Чтобы обьяснить распространение события в JavaScript нужно потратить не мало времени, вам стоит почитать документацию, либо же посмотреть какой-либо урок. Я также попробую вам помочь.

У меня есть 3 блока, и на каждом из них есть событие onclick. Первый блок является дочерним блоком второго, второй - третьего. То есть, вложенность блоков:

<div id="block">
    <div id="block-inside">
        <div id="block-last"></div>
    </div>
</div>

в JavaScript напишем:

document.getElementById("block").onclick = function () {
alert("block");
};
document.getElementById("block-inside").onclick = function () {
alert("block-inside");
};
document.getElementById("block-last").onclick = function () {
alert("block-last");
};

Теперь, при нажатии на block-last, у меня почему то будет показывать 3 алёрта? Почему? Это и называется распространением. При нажати block-last идёт заглубление к данному блоку. Чтобы вам было легче, просто представим что парсер при клике оказывается сразу на этом блоке, и отыгрывает его callback функцию на ивенте onclick, но чтобы работать с элементом DOM дальше, парсеру как-то нужно выйти с данного блока, по этому он и выходит с него но при выходе затрагивает родительские элементы, на которых также есть onclick, который он отыгрывает. Если на тэг body или html вы повесите событие onclick, т при нажатии на блок, это событие также отыграется.