За последние 24 часа нас посетили 22616 программистов и 1012 роботов. Сейчас ищут 700 программистов ...

Выделить элемент фильтра

Тема в разделе "JavaScript и AJAX", создана пользователем Sergey-911, 12 июл 2020.

  1. Sergey-911

    Sergey-911 Новичок

    С нами с:
    31 май 2020
    Сообщения:
    12
    Симпатии:
    0
    Добрый день!
    Есть сайт на Битрикс https://kpza.ru. На главной странице есть а-ля фильтр (см. приложенный скрин). Нужно подсветить его первый элемент, дабы пользователь понимал, что данные заголовки кликабельны.
    Нашел компонент в Битриксе, который формирует данный элемент фильтра (или пресет):
    Код (Text):
    1.  
    2. <script>
    3.     //Здесь формируются элементы фильтра, первый из которых нужно выделить
    4.     $(document).ready(function() {
    5.         $( ".tyika-tyika" ).click(function() {
    6.             $('.btn-tyka-tyka').attr('href', '/wins/' + $( this ).data('code') + '/');
    7.         });
    8.     });
    9. </script>
    Это файл template.php в компоненте wins_main.
    Попытался эмулировать событие клика через JavaScript:
    Код (Text):
    1.  
    2. <script type="text/javascript" async="false">
    3.         $(".d-tabs.js-tabs li:first").trigger('click');
    4. </script>
    В консоли браузере все отлично отрабатывает. А вот если данный скрипт помещаю в файл компонента, то ничего не происходит.
    Полный код файла template.php:
    Код (Text):
    1.  
    2. <?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
    3. $this->setFrameMode(true);
    4. ?>
    5. <script>
    6.     //Здесь формируются элементы фильтра, первый из которых нужно выделить
    7.     $(document).ready(function() {
    8.         $( ".tyika-tyika" ).click(function() {
    9.             $('.btn-tyka-tyka').attr('href', '/wins/' + $( this ).data('code') + '/');
    10.         });
    11.     });
    12. </script>
    13. <div class="page-section">
    14.     <h2 class="d-tac">Нам уже удалось помочь многим, и&nbsp;мы не&nbsp;собираемся останавливаться на&nbsp;достигнутом</h2>
    15.     <div class="subtitle d-tac fs_xl"><strong>Вот лишь некоторые из наших побед</strong></div>
    16.     <div class="d-tabs js-tabs">
    17.         <nav class="nav_tabs fs_sm d-tac d-ttu clr_gray d-hide_md">
    18.             <ul>
    19.                 <?$k = 0;?>
    20.                 <?foreach($arResult['ITEMS_RESULT'] as $key => $value):?>
    21.                     <li class="tyika-tyika" <?if($k == 0):?>class="current"<?endif;?> data-code="<?=$value['CODE']?>" data-href="tab<?=$key?>"><?=$value['NAME']?></li>
    22.                     <?$k++;?>
    23.                 <?endforeach;?>
    24.             </ul>
    25.         </nav>
    26.         <?$f = 0;?>
    27.         <?foreach($arResult['ITEMS_RESULT'] as $key => $value):?>
    28.             <?
    29.             $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
    30.             $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
    31.             ?>
    32.             <div id="<?=$this->GetEditAreaId($arItem['ID']);?>" class="d-tabs__item <?if($f == 0):?>current<?endif;?>" data-tab="tab<?=$key?>">
    33.                 <div class="d-tab__toggle trans" data-href="tab<?=$key?>"><?=$value['NAME']?><i
    34.                             class="fa fa-angle-down trans"></i></div>
    35.                 <div class="d-tab">
    36.                     <div class="grid_docs is-flexbox is-flexbox_row d-lnk-txt d-lnk-tdn fs_sm clr_dark">
    37.                         <?$counter = 0;?>
    38.                         <?foreach($value['ITEMS'] as $key_i => $value_i):?>
    39.                             <?$counter++;
    40.                             if($counter > 10){
    41.                                 break;
    42.                             }
    43.                             ?>
    44.                            
    45.                             <div class="grid_docs__item">
    46.                                 <!--a download href="<?=$value_i['DISPLAY_PROPERTIES']['FILE']['FILE_VALUE']['SRC']?>"-->
    47.                                 <a href="<?=$value_i['DETAIL_PAGE_URL']?>">
    48.                                     <span data-date="<?=$value_i['DISPLAY_PROPERTIES']['DATE']['VALUE']?>">
    49.                                         <figure>
    50.                                             <!--img src="<?=$value_i['PREVIEW_PICTURE']['SRC']?>" alt=""/-->
    51.                                             <img src="/upload/file.jpg" alt=""/>
    52.                                         </figure>
    53.                                     </span>
    54.                                     <em><?=$value_i['NAME']?></em>
    55.                                 </a>
    56.                             </div>
    57.                         <?endforeach;?>
    58.                     </div>
    59.                         <div class="d-tac" style='margin-bottom: 55px;'>
    60.                             <a href="/wins/<?=current($arResult['ITEMS_RESULT'])['CODE']?>/" class="btn-tyka-tyka btn">Смотреть все</a>
    61.                         </div>
    62.                 </div>
    63.             </div>
    64.             <?$f++;?>
    65.         <?endforeach;?>
    66.     </div>
    67.     <p class="subtitle d-tac fs_xl"><strong>Хотите, чтобы и Ваше дело закончилось благополучно –
    68.             обращайтесь!</strong></p>
    69.     <div class="d-tac">
    70.         <a href="javascript:" class="btn cboxElement" data-colorbox="{&quot;href&quot;: &quot;/local/templates/kpza/ajax/popup_form.php&quot;}">Свяжитесь с нами</a>
    71.     </div>
    72. </div>
    73. <!--Эмулируем клик на первом элементе фильтра-->
    74. <script type="text/javascript" async="false">
    75.         $(".d-tabs.js-tabs li:first").trigger('click');
    76. </script>
    Уже второй день бьюсь. Помогите пожалуйста.
     

    Вложения:

    • filtr.jpg
      filtr.jpg
      Размер файла:
      333,2 КБ
      Просмотров:
      1