Не работает скрипт для JS из-за того что img находится в разных циклах

@timkimk · Регистрация: 27.10.2022

Author24 — интернет-сервис помощи студентам

Привет всем! Есть такая проблема есть код Html+php работает скрипт для price-title а для card-img-bottom не работает, буду признателен если сможете помочь исправить код чтобы при нажатии на картинку и на price-title price-content менял none на block

PHP    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<?php
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();
$APPLICATION->AddHeadScript("/bitrix/templates/simpleland_standart/components/bitrix/news.list/tariffs/js/script.js");
$this->setFrameMode(true);
?>
 
<section class="prices text-center masked section" data-stellar-background-ratio="0.7">
  <div id="products" style="position: relative;top: -80px;"></div>
  <div class="container rel-1">
    <div class="imagine-row">
      <?php foreach ($arResult["ITEMS"] as $arItem): ?>
        <?php if (is_array($arItem["PREVIEW_PICTURE"])): ?>
          <div class="col-md-3">
            <img class="card-img-bottom" src="<?= $arItem["PREVIEW_PICTURE"]["SRC"] ?>" alt="<?= $arItem["PREVIEW_PICTURE"]["ALT"] ?>" title="<?= $arItem["PREVIEW_PICTURE"]["TITLE"] ?>"/>
            <div class="text-img-bottom" style="color: <?= $arItem["PROPERTIES"]["COLOR_TEXT_IMG_BOTTOM"]["VALUE"] ?>; color: #<?= $arItem["PROPERTIES"]["COLOR_TEXT_IMG_BOTTOM"]["VALUE"] ?>">
              <?= $arItem["NAME"] ?>
            </div>
          </div>
        <?php endif; ?>
      <?php endforeach; ?>
    </div>
    <div class="section-body">
<div class="row-price justify-content-end">
<?php
$i = 0;
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')));
$class = 'unique-section'; // Установка класса 'unique-section' для каждого элемента
?>
<div class="<?php echo $class; ?>">
<div class="unique-section">
<h1 class="price-title <?= $class ?>" style="background-color: <?= $arItem["PROPERTIES"]["BG_Z_COLOR"]["VALUE"] ?>; color: #<?= $arItem["PROPERTIES"]["COLOR_Z_TEXT"]["VALUE"] ?>;"><?= $arItem['NAME'] ?> <span class="arrow"></span></h1>
<div class="price-content" style="display: none;">
<div class="info-block" id="<?= $this->GetEditAreaId($arItem['ID']);?>" style="right: 0;"> <br>
<div class="price-box">
<div class="price-body">
<div class="price" style="background-color: <?= $arItem["PROPERTIES"]["BG_COLOR"]["VALUE"];?>; ">
<div class="price-body">
<?php if (is_array($arItem["PREVIEW_PICTURE"])): ?>
<div class="price-detailed-img">
<img class="card-img-top" src="<?= $arItem["PREVIEW_PICTURE"]["SRC"]?>" alt="<?= $arItem["PREVIEW_PICTURE"]["ALT"]?>" title="<?= $arItem["PREVIEW_PICTURE"]["TITLE"]?>"/>
</div>
<?php endif; ?>
</div>
<div class="container" style="color: #<?= $arItem["PROPERTIES"]["COLOR_PZ_TEXT"]["VALUE"];?>; ">
<div class="vertical-line" style="background-color: <?= $arItem["PROPERTIES"]["RECTANGLE"]["VALUE"];?>; "> 
<strong class="price-amount"><?= $arItem["PROPERTIES"]['PRICE']['VALUE'];?></strong><br>
 
<?php if ("" != $arItem["PROPERTIES"]['CUR_PERIOD']['VALUE']): ?>
    <strong class="price-period"><?= $arItem["PROPERTIES"]['CUR_PERIOD']['VALUE'];?></strong>
<?php else: ?>
    <strong class="OneLine"><?= $arItem["PROPERTIES"]['PRICE']['VALUE'];?></strong>
<?php endif; ?>
</div>
</div>   
<div class="price-features" style="color:#<?= $arItem["PROPERTIES"]["COLOR_OSOB"]["VALUE"];?> ">
<ul>
<?php foreach ($arItem['PROPERTIES']['OSOB']['VALUE'] as $TarifOsob): ?>
<li><?= $TarifOsob;?></li>
<?php endforeach; ?>
</ul>
</div>
<button class="btn" name="<?= $arItem['NAME'] ?>">
<?= $arItem["PROPERTIES"]['BUTTON']['VALUE'] ?>
<a href="<?=$arItem["PROPERTIES"]['LINK']['VALUE'];?>">
</a>
</button>
</div>
 
</div>
 
</div>
</div>
</div>
    </div>
  </div>
<?php
$i++;
endforeach;
?>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <?php
    $APPLICATION->AddHeadScript("/bitrix/templates/simpleland_standart/components/bitrix/news.list/tariffs/js/script.js");
    ?>

<JS>

JavaScript    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function() {
    $(document).on("click", ".price-title, .card-img-bottom", function() {
      var content = $(this).next(".price-content");
      var arrow = $(this).find(".arrow");
 
      arrow.toggleClass("expanded");
      content.slideToggle();
 
      if (arrow.hasClass("expanded")) {
        arrow.css("transform", "rotate(225deg)");
      } else {
        arrow.css("transform", "");
      }
    });
  });

@sad67man · 28.08.2023, 19:36

timkimk,
Необходимо будет связывать блоки по идентификатору. Его можно передать через data-id аттрибут.

Для js лучше использовать специальные классы с приставкой js-* - разделять классы, которые отвечают за отображение, и за поведение. Тогда их можно повторно использовать независимо друг от друга.

Как-нибудь так

PHP/HTML    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<?php
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();
$APPLICATION->AddHeadScript("/bitrix/templates/simpleland_standart/components/bitrix/news.list/tariffs/js/script.js");
$this->setFrameMode(true);
?>
 
    <section class="prices text-center masked section" data-stellar-background-ratio="0.7">
    <div id="products" style="position: relative;top: -80px;"></div>
    <div class="container rel-1">
        <div class="imagine-row">
            <?php foreach ($arResult["ITEMS"] as $arItem): ?>
                <?php if (is_array($arItem["PREVIEW_PICTURE"])): ?>
                    <div class="col-md-3">
                        <img class="card-img-bottom js-price-button" data-id="<?= $arItem['ID'] ?>" src="<?= $arItem["PREVIEW_PICTURE"]["SRC"] ?>" alt="<?= $arItem["PREVIEW_PICTURE"]["ALT"] ?>" title="<?= $arItem["PREVIEW_PICTURE"]["TITLE"] ?>"/>
                        <div class="text-img-bottom" style="color: <?= $arItem["PROPERTIES"]["COLOR_TEXT_IMG_BOTTOM"]["VALUE"] ?>; color: #<?= $arItem["PROPERTIES"]["COLOR_TEXT_IMG_BOTTOM"]["VALUE"] ?>">
                            <?= $arItem["NAME"] ?>
                        </div>
                    </div>
                <?php endif; ?>
            <?php endforeach; ?>
        </div>
        <div class="section-body">
            <div class="row-price justify-content-end">
                <?php
                $i = 0;
                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')));
                    $class = 'unique-section'; // Установка класса 'unique-section' для каждого элемента
                    ?>
                    <div class="<?php echo $class; ?>">
                        <div class="unique-section js-price-wrapper" data-id="<?= $arItem['ID'] ?>">
                            <h1 class="price-title <?= $class ?>" style="background-color: <?= $arItem["PROPERTIES"]["BG_Z_COLOR"]["VALUE"] ?>; color: #<?= $arItem["PROPERTIES"]["COLOR_Z_TEXT"]["VALUE"] ?>;"><?= $arItem['NAME'] ?> <span class="arrow js-price-button" data-id="<?= $arItem['ID'] ?>"></span></h1>
                            <div class="price-content" style="display: none;">
                                <div class="info-block" id="<?= $this->GetEditAreaId($arItem['ID']);?>" style="right: 0;"> <br>
                                    <div class="price-box">
                                        <div class="price-body">
                                            <div class="price" style="background-color: <?= $arItem["PROPERTIES"]["BG_COLOR"]["VALUE"];?>; ">
                                                <div class="price-body">
                                                    <?php if (is_array($arItem["PREVIEW_PICTURE"])): ?>
                                                        <div class="price-detailed-img">
                                                            <img class="card-img-top" src="<?= $arItem["PREVIEW_PICTURE"]["SRC"]?>" alt="<?= $arItem["PREVIEW_PICTURE"]["ALT"]?>" title="<?= $arItem["PREVIEW_PICTURE"]["TITLE"]?>"/>
                                                        </div>
                                                    <?php endif; ?>
                                                </div>
                                                <div class="container" style="color: #<?= $arItem["PROPERTIES"]["COLOR_PZ_TEXT"]["VALUE"];?>; ">
                                                    <div class="vertical-line" style="background-color: <?= $arItem["PROPERTIES"]["RECTANGLE"]["VALUE"];?>; ">
                                                        <strong class="price-amount"><?= $arItem["PROPERTIES"]['PRICE']['VALUE'];?></strong><br>
 
                                                        <?php if ("" != $arItem["PROPERTIES"]['CUR_PERIOD']['VALUE']): ?>
                                                            <strong class="price-period"><?= $arItem["PROPERTIES"]['CUR_PERIOD']['VALUE'];?></strong>
                                                        <?php else: ?>
                                                            <strong class="OneLine"><?= $arItem["PROPERTIES"]['PRICE']['VALUE'];?></strong>
                                                        <?php endif; ?>
                                                    </div>
                                                </div>
                                                <div class="price-features" style="color:#<?= $arItem["PROPERTIES"]["COLOR_OSOB"]["VALUE"];?> ">
                                                    <ul>
                                                        <?php foreach ($arItem['PROPERTIES']['OSOB']['VALUE'] as $TarifOsob): ?>
                                                            <li><?= $TarifOsob;?></li>
                                                        <?php endforeach; ?>
                                                    </ul>
                                                </div>
                                                <button class="btn" name="<?= $arItem['NAME'] ?>">
                                                    <?= $arItem["PROPERTIES"]['BUTTON']['VALUE'] ?>
                                                    <a href="<?=$arItem["PROPERTIES"]['LINK']['VALUE'];?>">
                                                    </a>
                                                </button>
                                            </div>
 
                                        </div>
 
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php
                    $i++;
                endforeach;
                ?>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<?php
$APPLICATION->AddHeadScript("/bitrix/templates/simpleland_standart/components/bitrix/news.list/tariffs/js/script.js");
?>

JavaScript    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function() {
    $(document).on("click", ".js-price-button", function() {
        let id = $(this).data('id');
        let $wrapper = $('.js-price-wrapper[data-id="' + id + '"]');
        let $content = $wrapper.find(".price-content");
        let $arrow = $wrapper.find(".arrow");
 
        $arrow.toggleClass("expanded");
 
        if ($arrow.hasClass("expanded")) {
            $content.slideDown();
            $arrow.css("transform", "rotate(225deg)");
        } else {
            $content.slideUp();
            $arrow.css("transform", "");
        }
    });
});

@timkimk · 30.08.2023, 10:49 **[ТС]**

sad67man, а как можно добавить скрипт чтобы каждое изображение имело свою ссылку и скролила к к тому блоку который был нажат(открывается)

Новые блоги и статьи Все статьи Все блоги /
Мульти-тенантные БД с PostgreSQL Row Security Codd 23.04.2025 Современные облачные сервисы и бизнес-приложения всё чаще обслуживают множество клиентов в рамках единой программной инфраструктуры. Эта архитектурная модель, известная как мульти-тенантность, стала. . .	Реализация конвейеров машинного обучения с Python и Scikit-learn AI_Generated 23.04.2025 Мир данных вокруг нас растёт с каждым днём, и умение эффективно обрабатывать информацию стало необходимым навыком. Специалисты по машинному обучению ежедневно сталкиваются с задачами предобработки. . .	Контроллеры Kubernetes Ingress: Сравнительный анализ Mr. Docker 23.04.2025 В Kubernetes управление входящим трафиком представляет собой одну из ключевых задач при построении масштабируемых и отказоустойчивых приложений. Ingress — это API-объект, который служит вратами. . .	Оптимизация кода Python с Cython и Numba py-thonny 23.04.2025 Python прочно обосновался в топе языков программирования благодаря своей простоте и гибкости. Разработчики любят его за читабельность кода и богатую экосистему библиотек. Но у этой медали есть и. . .	Микросервис на Python с FastAPI и Docker ArchitectMsa 23.04.2025 В эпоху облачных вычислений и растущей сложности программных продуктов классическая монолитная архитектура всё чаще уступает место новым подходам. Микросервисная архитектура становится фаворитом. . .
Создаем веб-приложение на Vue.js и Laravel Reangularity 23.04.2025 Выбор правильного технологического стека определяет успех веб-проекта. Laravel и Vue. js формируют отличную комбинацию для создания современных приложений. Laravel — это PHP-фреймворк с элегантным. . .	Максимальная производительность C#: Span<T> и Memory<T> stackOverflow 22.04.2025 Мир высоконагруженных приложений безжалостен к неэффективному коду. Каждая миллисекунда на счету, каждый выделенный байт памяти может стать причиной падения производительности. Разработчики на C#. . .	JWT аутентификация в Java Javaican 21.04.2025 JWT (JSON Web Token) представляет собой открытый стандарт (RFC 7519), который определяет компактный и самодостаточный способ передачи информации между сторонами в виде JSON-объекта. Эта информация. . .	Спринты Agile: Планирование, выполнение, ревью и ретроспектива EggHead 21.04.2025 Спринты — сердцевина Agile-методологии, позволяющая командам создавать работающий продукт итерационно, с постоянной проверкой гипотез и адаптацией к изменениям. В основе концепции спринтов лежит. . .	Очередные открытия мега простых чисел, сделанные добровольцами с помощью домашних компьютеров Programma_Boinc 21.04.2025 Очередные открытия мега простых чисел, сделанные добровольцами с помощью домашних компьютеров. 3 марта 2025 года, в результате обобщенного поиска простых чисел Ферма в PrimeGrid был найден. . .

@timkimk 0 / 0 / 0 Регистрация: 27.10.2022 Сообщений: 4
	30.08.2023, 10:49 [ТС]
	sad67man, а как можно добавить скрипт чтобы каждое изображение имело свою ссылку и скролила к к тому блоку который был нажат(открывается) 0