Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.07.2020, 21:12
Новичок на форуме
Отправить личное сообщение для Sergey-911 Посмотреть профиль Найти все сообщения от Sergey-911
 
Регистрация: 31.05.2020
Сообщений: 2

Выделить элемент фильтра
Добрый день!
Есть сайт на Битрикс https://kpza.ru. На главной странице есть а-ля фильтр (см. приложенный скрин). Нужно подсветить его первый элемент, дабы пользователь понимал, что данные заголовки кликабельны.
Нашел компонент в Битриксе, который формирует данный элемент фильтра (или пресет):
<script>
	//Здесь формируются элементы фильтра, первый из которых нужно выделить
    $(document).ready(function() {
        $( ".tyika-tyika" ).click(function() {
            $('.btn-tyka-tyka').attr('href', '/wins/' + $( this ).data('code') + '/');
        });
    });
</script>

Это файл template.php в компоненте wins_main.
Попытался эмулировать событие клика через javascript:
<script type="text/javascript" async="false">
		$(".d-tabs.js-tabs li:first").trigger('click');
</script>

В консоли браузере все отлично отрабатывает. А вот если данный скрипт помещаю в файл компонента, то ничего не происходит.
Полный код файла template.php:
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
$this->setFrameMode(true);
?>



<script>
	//Здесь формируются элементы фильтра, первый из которых нужно выделить
    $(document).ready(function() {
        $( ".tyika-tyika" ).click(function() {
            $('.btn-tyka-tyka').attr('href', '/wins/' + $( this ).data('code') + '/');
        });
    });
</script>
<div class="page-section">
	<h2 class="d-tac">Нам уже удалось помочь многим, и&nbsp;мы не&nbsp;собираемся останавливаться на&nbsp;достигнутом</h2>
	<div class="subtitle d-tac fs_xl"><strong>Вот лишь некоторые из наших побед</strong></div>
	<div class="d-tabs js-tabs">
		<nav class="nav_tabs fs_sm d-tac d-ttu clr_gray d-hide_md">
			<ul>
				<?$k = 0;?>
				<?foreach($arResult['ITEMS_RESULT'] as $key => $value):?>
					<li class="tyika-tyika" <?if($k == 0):?>class="current"<?endif;?> data-code="<?=$value['CODE']?>" data-href="tab<?=$key?>"><?=$value['NAME']?></li>
					<?$k++;?>
				<?endforeach;?>
			</ul>
		</nav>
		<?$f = 0;?>
		<?foreach($arResult['ITEMS_RESULT'] as $key => $value):?>
			<?
			$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 id="<?=$this->GetEditAreaId($arItem['ID']);?>" class="d-tabs__item <?if($f == 0):?>current<?endif;?>" data-tab="tab<?=$key?>">
				<div class="d-tab__toggle trans" data-href="tab<?=$key?>"><?=$value['NAME']?><i
							class="fa fa-angle-down trans"></i></div>
				<div class="d-tab">
					<div class="grid_docs is-flexbox is-flexbox_row d-lnk-txt d-lnk-tdn fs_sm clr_dark">
						<?$counter = 0;?>
						<?foreach($value['ITEMS'] as $key_i => $value_i):?>
							<?$counter++;
							if($counter > 10){
								break;
							}
							?>
							
							<div class="grid_docs__item">
								<!--a download href="<?=$value_i['DISPLAY_PROPERTIES']['FILE']['FILE_VALUE']['SRC']?>"-->
								<a href="<?=$value_i['DETAIL_PAGE_URL']?>">
									<span data-date="<?=$value_i['DISPLAY_PROPERTIES']['DATE']['VALUE']?>">
										<figure>
											<!--img src="<?=$value_i['PREVIEW_PICTURE']['SRC']?>" alt=""/-->
											<img src="/upload/file.jpg" alt=""/>
										</figure>
									</span>
									<em><?=$value_i['NAME']?></em>
								</a>
							</div>
						<?endforeach;?>
					</div>
						<div class="d-tac" style='margin-bottom: 55px;'>
							<a href="/wins/<?=current($arResult['ITEMS_RESULT'])['CODE']?>/" class="btn-tyka-tyka btn">Смотреть все</a>
						</div>
				</div>
			</div>
			<?$f++;?>
		<?endforeach;?>
	</div>
	<p class="subtitle d-tac fs_xl"><strong>Хотите, чтобы и Ваше дело закончилось благополучно –
			обращайтесь!</strong></p>
	<div class="d-tac">
		<a href="javascript:" class="btn cboxElement" data-colorbox="{&quot;href&quot;: &quot;/local/templates/kpza/ajax/popup_form.php&quot;}">Свяжитесь с нами</a>
	</div>
</div>





<!--Эмулируем клик на первом элементе фильтра-->
<script type="text/javascript" async="false">
		$(".d-tabs.js-tabs li:first").trigger('click');
</script>


Уже второй день бьюсь. Помогите пожалуйста.
Изображения:
Тип файла: jpg filtr.jpg (333.2 Кб, 0 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 12.07.2020, 21:44
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,441

Нужно не РНР код выставлять, а результат его работы и зачем для того чтобы "подсветить" нужно щелкать? Для этого есть CSS.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сделать родительский элемент меню активным, дочерний элемент которого был нажат Jimmi Элементы интерфейса 6 04.06.2020 12:06
определить элемент под перетаскиваемым элементом slavaspirit Элементы интерфейса 3 26.07.2015 01:49
Выбрать элемент у родителя которого сын это элемент по которому кликнули MalikSPB Events/DOM/Window 8 30.12.2012 10:22
Выделить следующий элемент red-nicolas jQuery 7 28.08.2012 14:46
Drag-n-Drop - перетянуть элемент Jugo ExtJS 1 10.08.2011 18:10