尝试使用 JavaScript 减少 HTML 代码的重复

Question

您好，我最近一直在做一个项目，其中有一个带有各种元素的滑块，当单击特定滑块元素上的“了解更多”按钮时，将打开一个弹出模式，其中包含所选内容的特定详细信息滑块元素。现在我的滑块变得非常长，并且我有许多幻灯片和模态。我的幻灯片和模式之间共享的唯一元素是标题和图像位置，我一直想知道是否可以使用 JavaScript 或任何东西使我的代码看起来不错并删除我的代码的重复模式下面是我的代码：

<!-- Slides 1 -->
<div class="swiper-slide">
    <div class="card">
        <div class="card_image">
            <img src="CSS/Assets/Images/Slider_Images/Teamwork.png">
        </div>
        <div class="card_info">
            <h3 class="card_title">1. Teamwork</h3>
            <p>
                The ability to work well in a team. This shows that you have the maturity to realise that no work is standalone
            </p>
            <button data-modal-target="#modal1" class="card_btn">
                <h4>Learn More</h4>
            </button>
        </div>
   </div>
</div>
                                    
<!-- Slides 2 -->
<div class="swiper-slide">
    <div class="card">
        <div class="card_image">
            <img src="CSS/Assets/Images/Slider_Images/Decision Making.jpg">
        </div>
        <div class="card_info">
            <h3 class="card_title">2. Decision Making</h3>
            <p>
                Decision making is the process of making choices by identifying a decision, and assessing alternative resolutions. 
            </p>
            <button data-modal-target="#modal2" class="card_btn">
                <h4>Learn More</h4>
            </button>
        </div>
    </div>
</div>

在我的代码中，我有许多幻灯片，当单击“了解更多”按钮时，应该会打开另一个重复的代码，如下所示：

<!-- Modal 1 -->
<div class="modal" id="modal1">
    <div class="modal_header">
        <div class="modal_image">
            <img src="CSS/Assets/Images/Slider_Images/Teamwork.png">
        </div>
    </div>
    <div class="modal_body">
        <h3 class="modal_title">1. Teamwork</h3>
        <div class="modal_para">
            <p>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga assumenda nulla reprehenderit. Numquam culpa, quidem pariatur nam commodi ea necessitatibus incidunt sunt sapiente laboriosam asperiores assumenda repudiandae? Perspiciatis, sed! Veniam?
            </p>
        </div>
        <button data-close-button class="close-button">Close</button>
    </div>   
</div>
<div id="overlay"></div>

<!-- Modal 2 -->
<div class="modal" id="modal2">
    <div class="modal_header">
        <div class="modal_image">
            <img src="CSS/Assets/Images/Slider_Images/Decision Making.jpg">
        </div>
    </div>
    <div class="modal_body">
        <h3 class="modal_title">2. Decision Making</h3>
        <div class="modal_para">
            <p>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga assumenda nulla reprehenderit. Numquam culpa, quidem pariatur nam commodi ea necessitatibus incidunt sunt sapiente laboriosam asperiores assumenda repudiandae? Perspiciatis, sed! Veniam?
            </p>
        </div>
        <button data-close-button class="close-button">Close</button>
    </div>   
</div>
<div id="overlay"></div>

我的问题是：有没有办法让我继续添加其他幻灯片和模式，以减少 JavaScript 或 PHP 中重复的 HTML 模式，同时保持代码的完整性？滑块中的每个元素都是不同的，打开一个相应的模式弹出窗口，它们只共享相同的图像位置和标题。然而，幻灯片和模态文本之间没有共享文本，我想知道随着项目滑块的增加，JavaScript 中的任何代码是否会帮助我获得更简洁的代码

Answer 1

如果您使用 php，您可以使用数组数组并循环遍历它来创建幻灯片：

<?php
     $myslides = array(
            array(
                'id' => 1,
                'title' => 'First slide',
                'content' => 'somthing to say',
                'imgUrl' => 'http://myimageslink.com/img.png'
            ),
            array(
                'id' => 2,
                'title' => 'Second slide',
                'content' => 'somthing to say',
                'imgUrl' => 'http://myimageslink.com/img.png'
            ),
            array(
                'id' => 3,
                'title' => 'third slide',
                'content' => 'somthing to say',
                'imgUrl' => 'http://myimageslink.com/img.png'
            ),
            array(
                'id' => 4,
                'title' => 'Fourth slide',
                'content' => 'somthing to say',
                'imgUrl' => 'http://myimageslink.com/img.png'
            ),
            //More arrays means more slides
    );

?>

然后循环数组来获取你的幻灯片：

 <?php
    
        foreach($myslides as $slide) :
    ?>

    <div class="swiper-slide">
        <div class="card">
            <div class="card_image">
                <img src="<?= $slide['imgUrl']; ?>">
            </div>
            <div class="card_info">
                <h3 class="card_title"><?= $slide['title']; ?></h3>
                <p>
                    <?= $slide['content']; ?>
                </p>
                <button data-modal-target="#modal<?= $slide['id']; ?>" class="card_btn">
                    <h4>Learn More</h4>
                </button>
            </div>
    </div>
    </div>

    <?php 
        endforeach;
    ?>

别忘了循环遍历你的模型 同一个循环，不同的html

<?php
    
        foreach($myslides as $slide) :
    ?>

    <div class="modal" id="modal<?= $slide['id']; ?>">
        <div class="modal_header">
            <div class="modal_image">
                <img src="<?= $slide['imgUrl']; ?>">
            </div>
        </div>
        <div class="modal_body">
            <h3 class="modal_title"><?= $slide['title']; ?></h3>
            <div class="modal_para">
                <p>
                    <?= $slide['content']; ?>
                </p>
            </div>
            <button data-close-button class="close-button">Close</button>
        </div>   
    </div>
    <div id="overlay"></div>

    <?php 
        endforeach;
    ?>

PS： PHP 适合渲染 html，但最好保留它用于其他服务器端任务，您可以考虑学习 ReactJS 来处理复杂的前端任务