嵌套循环结构中Details按钮无法触发预期功能求助

问题根源 #

1. DOM结构层级错误：vacancy-card元素和company-card是同级关系，并非嵌套在company-card内部，导致$(this).closest('.company-card').find('.vacancy-card')无法定位到目标元素。
2. 类名冲突：PDF生成按钮也使用了details-btn类，导致点击PDF按钮时也会触发Details按钮的事件逻辑，同时分散了事件绑定的准确性。

修复方案 #

1. 调整DOM结构 #

将vacancy-card嵌套到对应的company-card内部，确保层级关系正确。

2. 区分按钮类名 #

给Details按钮单独设置类名show-vacancies-btn，避免和PDF按钮的类名冲突。

3. 修正JavaScript事件逻辑 #

更新事件绑定的选择器，使用新的按钮类名，并调整元素查找逻辑。

修复后的完整代码 #

<div class="country-card" data-country="Угорщина">
    <img src="{{ asset('admin_assets/img/hungary.png') }}" alt="Угорщина Прапор">
    <span>Угорщина</span>
</div>

<div class="country-card" data-country="Словаччина">
    <img src="{{ asset('admin_assets/img/slovakia.png') }}" alt="Словаччина Прапор">
    <span>Словаччина</span>
</div>

<div class="country-card" data-country="Чехія">
    <img src="{{ asset('admin_assets/img/czech-republic.png') }}" alt="Чехія Прапор">
    <span>Чехія</span>
</div>

<br>
<br>

@foreach(['Угорщина', 'Словаччина', 'Чехія'] as $country)
<!-- Блок країни -->
<div class="country-block" id="{{ $country }}">
    <h2>{{ $country }}</h2>
    <div class="company-cards">
        @foreach($project->where('country', $country) as $rs)
            <!-- Картка компанії в обраній країні -->
            <div class="card company-card" data-country="{{ $country }}" data-company="{{ $rs->company }}">
                <div class="card-body">
                    <h5 class="card-title">{{ $rs->company }}</h5>
                    <p class="card-text">{{ $rs->city }}</p>

                    <!-- Details button -->
                    <button class="btn btn-secondary show-vacancies-btn">DETAILS</button> <br>
                </div>
                
                <!-- 将vacancy-card嵌套到company-card内部 -->
                @foreach($project->where('company', $rs->company) as $vacancy)
                    <!-- Картка вакансії для обраної компанії -->
                    <div class="card vacancy-card" style="margin: 10px; display:none;">
                        <div class="card-body">
                            <h5 class="card-title">{{ $vacancy->vacancy }}</h5>
                            <p class="card-text">{{ $vacancy->job }}</p> 
                            
                            <!-- Кнопка "Створити PDF" для вакансії -->
                            <button type="button" class="btn btn-primary" onclick="openPDFEditor('{{ $vacancy->id }}')">Створити PDF</button>

                            <!-- Модальне вікно редактора PDF для вакансії -->
                            <div id="pdfEditorModal_{{ $vacancy->id }}" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); z-index: 9999; ">
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <h3>Редактор PDF</h3>
                                    <!-- Кнопка закриття модального вікна -->
                                    <button type="button" onclick="closePDFEditor('{{ $vacancy->id }}')">✖</button>
                                </div>
                                <hr>
                                <div style="display: flex;" >
                                    <div id="pdfPreview" style="margin-right: 20px; border: 1px solid #ccc;  "></div>
                                    <div>
                                        <!-- Форма для введення даних перед створенням PDF -->
                                        <label for="name">Країна</label>
                                        <input type="text" id="name" required>
                                        <br>
                                        <label for="email">Назва проекту\заводу</label>
                                        <input type="email" id="email" required>
                                        <br>
                                        <!-- Кнопки для операцій з PDF -->
                                        <button type="button" onclick="generateAndPreviewPDF()">Створити і Переглянути PDF</button>
                                        <br> <br>
                                        <button type="button" onclick="downloadPDF()">Завантажити PDF</button>
                                    </div>
                                </div>
                            </div>
                        </div> 
                    </div> 
                @endforeach
            </div>
            <br>
        @endforeach
    </div>
</div>
@endforeach

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function(){
        $('.country-block, .company-cards, .show-vacancies-btn').hide();

        $('.country-card').on('click', function(){
            var countryId = $(this).data('country');

            $('.country-block').hide();
            $('#'+countryId).show();

            $('.company-cards').hide();
            $('#'+countryId+' .company-cards').show();

            $('.show-vacancies-btn').show();
        });

        $(document).on('click', '.show-vacancies-btn', function(){
            // 切换当前公司下的职位卡片显示状态
            var $vacancyCards = $(this).closest('.company-card').find('.vacancy-card');
            $vacancyCards.toggle();
            
            // 可选：隐藏其他公司的职位卡片
            $('.vacancy-card').not($vacancyCards).hide();
        }); 
    });

    // 补充PDF相关函数（原代码中缺失）
    function openPDFEditor(id) {
        $('#pdfEditorModal_' + id).show();
    }

    function closePDFEditor(id) {
        $('#pdfEditorModal_' + id).hide();
    }

    function generateAndPreviewPDF() {
        // 这里添加PDF生成和预览逻辑
    }

    function downloadPDF() {
        // 这里添加PDF下载逻辑
    }
</script>

额外说明 #

• 修复了vacancy-card的初始显示状态，直接在元素上设置display:none，避免JS初始化时的重复操作。
• 给Details按钮的点击事件添加了toggle()逻辑，支持点击显示/隐藏职位卡片，提升交互体验。
• 补充了原代码中缺失的PDF相关函数，避免控制台报错。

内容的提问来源于stack exchange，提问作者Sas Ber