Как в компоненте битрикс 1c сделать событие на кнопку в динамической разметке?

Question

Как в компоненте битрикс 1c сделать событие на кнопку в динамической разметке?

Рейтинг: 0Ответов: 1Опубликовано: 27.04.2023

У меня возникла проблема. В компоненте битркс 1с у меня следующая разметка:

<div data-script="slider" data-slider-options='{"autoplay":false,"breakpoints":{"320":{"slidesPerView":1,"spaceBetween":30},"768":{"slidesPerView":3,"spaceBetween":30},"1200":{"slidesPerView":3,"spaceBetween":30}},"content_element":"images","js":["js/module-swiper-bundle.esm.browser.min.js","js/module-vue.esm.browser.min.js","js/module-slider.js","js/module-vue-awesome-swiper.js"],"loop":false,"navigation":{"nextEl":".swiper-button-next","prevEl":".swiper-button-prev"},"onClickZoom":false,"pagination":{"bulletActiveClass":"active","clickable":true,"el":".swiper-pagination","bulletElement":"span data-element=\"c2aa4a06-56f3-450d-8842-82437cb71e2b/9e0e10c9-b8de-4b3b-88d7-4ff86242fa81\" data-design-nested=\"Пагинация\""},"sliderColumns":{"max":4,"min":1},"slidesPerGroup":1,"space_between":true}' data-design="c2aa4a06-56f3-450d-8842-82437cb71e2b" class="swiper FinansSlider">
  <div class="swiper-wrapper">

    <? foreach ($arResult["ITEMS"] as $arItem) : ?>
      <?
      $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
      $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
      ?>

      <div class="swiper-slide swiper-slide-active" data-element="9d7631ef-ec1b-4cb8-92c0-049c143e2042/d2f87e5a-183b-4795-bca5-716c1d36f6f4" data-design-nested="Слайды" style="width: 350px; margin-right: 30px">
        <div class="container__video">
          <button  class="block__button"><svg class="icon-video" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" aria-labelledby="cli-play" role="presentation">
              <title id="cli-play" lang="en"></title>
              <g fill="currentColor">
                <path d="M20.0612 10.3661C21.3129 11.0933 21.3129 12.9067 20.0612 13.6339L7.82411 20.7431C6.56982 21.4718 5 20.5636 5 19.1092L5 4.89078C5 3.43643 6.56981 2.52821 7.82411 3.25689L20.0612 10.3661Z" fill-rule="evenodd" clip-rule="evenodd"></path>
              </g>
            </svg>
    </button>
          <div class="preview-video" style="background-image: url(<?= $arItem['PROPERTIES']['SRC']['VALUE'] ?>);"></div>

          <?= ($arItem['PROPERTIES']['VIDEO']["~VALUE"]["TEXT"]) ?>
        </div>
      </div>

    <? endforeach ?>
 </div>
</div>

У меня есть кнопка block__button. Я вешаю событие, но кнопка срабатывает только на первом элементе. Буду признателен любой помощи

window.onload = function() {
    document.querySelector(".block__button").addEventListener('click',function(event) {
        document.querySelector('.block__button').classList.add("display-none");
        document.querySelector('.preview-video').classList.add("display-none");
    });
}

javascript битрикс

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Смотри нужно немного по другому написать код JS функции. Тебе надо через querySelectorAll выбрать все нужные классы

window.onload = function() {
const knopochka = document.querySelectorAll(".block__button");
const vidosik = document.querySelectorAll(".preview-video");
 for (let i = 0; i < knopochka.length; i++) {
     knopochka[i].addEventListener("click", function() {
       knopochka[i].classList.add("display-none");
       vidosik[i].classList.add("display-none");
     });
 }
 }

Как в компоненте битрикс 1c сделать событие на кнопку в динамической разметке?

Ответы