0

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

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

<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"

3 ответа 3

0

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

$(function() {
    $('.elementSkuPropertyValue ').on('click', function() {
         var value = $(this).data('value');
         $('#skuPropertyValue[data-value=\''+ value + '\']').trigger('click')
    })
 })
7
  • спасибо! а ее нужно как то подцелять к к клику? т.е. на ссылке делать onClick(function)? Добавил в текст, заменил дата-валюе но ничего не происходит 17 апр 2019 в 5:19
  • Нет, ее не нужно подцеплять, она срабатывает при клике.Я не могу сказать почему она у вас не работает, смотрите в консоль, напишете alert() в функции, посмотрите срабатывает ли она вообще. Посмотрите на какой действительно элемент нужно нажать через консоль браузера к примеру так: jQuery($0).trigger('click') где $0 - это текущий элемент
    – Alexy
    17 апр 2019 в 7:11
  • а вы можете посмотреть на сайте? я готов отплатить. guryanova-bitrix-6.tw1.ru/catalog/kabinety_dlya_rukovoditeley/… для вас просто а для кого то сложно) 17 апр 2019 в 11:28
  • Тогда вам лучше обратится на фриланс биржу.
    – Alexy
    17 апр 2019 в 11:58
  • да, я бы рад сам, но не выходит прописал alert() в $(function() {} и в on('click', function() {}. но сообщения нет, оно должно быть в консоле? или на экране? Я правильно понимаю в вашем коде идет сначала обращение к классу, а потом к ID элемента? 17 апр 2019 в 12:11
0

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

1
  • А вы можете примером написать? 18 апр 2019 в 8:34
0

Чтобы обьяснить распространение события в 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, т при нажатии на блок, это событие также отыграется.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.