如何使用 PHP 减少 html 代码的重复性？

Question

我有一个 slider ，其中包含各种元素，当单击特定元素上的按钮时，将打开一个弹出窗口，其中包含该选定元素的特定详细信息。 现在我的 slider 变得非常长，我一直想知道我是否可以使用 JavaScript 或任何东西来使我的代码看起来不错并删除我的代码的重复模式下面是我的代码：

<!-- Slides 1 -->
<div class="swiper-slide">
    <div class="card">
        <div class="card_image">
            <img src="image location">
        </div>
        <div class="card_info">
            <h3 class="card_title">Title</h3>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam porro ex vel minima, eaque culpa iusto veritatis ad tempore, unde animi dolorum optio modi nemo harum quia? Eaque, exercitationem et!
            </p>
            <button data-modal-target="#modal1" 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="image location">
        </div>
    </div>
    <div class="modal_body">
        <h3 class="modal_title">Title</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 模式，同时保持我的代码的完整性？

Answer 1

您可以使用单个模态和一些 javascript 来填充该模态。

下面只是一个例子：

 function showText(slideNo) { var title = document.getElementById("slide_title_" + slideNo).innerText; var text = document.getElementById("slide_text_" + slideNo).innerText; document.getElementById("modal_title").innerText = title; document.getElementById("modal_text").innerText = text; } function clearModal() { document.getElementById("modal_title").innerText = ""; document.getElementById("modal_text").innerText = ""; }

 <!-- Slides 1 --> <div class="swiper-slide"> <div class="card"> <div class="card_image"> <img src="image location"> </div> <div class="card_info"> <h3 class="card_title" id="slide_title_1"> Slide 1 Title</h3> <p id="slide_text_1"> Slide 1 Text </p> <button class="card_btn" onclick="showText(1)"> <h4>Learn More</h4> </button> </div> </div> </div> <!-- Slides 2 --> <div class="swiper-slide"> <div class="card"> <div class="card_image"> <img src="image location"> </div> <div class="card_info"> <h3 class="card_title" id="slide_title_2"> Slide 2 Title</h3> <p id="slide_text_2"> Slide 2 Text </p> <button class="card_btn" onclick="showText(2)"> <h4>Learn More</h4> </button> </div> </div> </div> <!-- Modal --> <div class="modal" id="modal"> <div class="modal_header"> <div class="modal_image"> <img src="image location"> </div> </div> <div class="modal_body"> <h3 class="modal_title" id="modal_title">Title</h3> <div class="modal_para"> <p id="modal_text"> </p> </div> <button class="close-button" onclick="clearModal()">Close</button> </div> </div> <div id="overlay"></div>

Answer 2

在 PHP 中，您可以使用 Smarty 和 package 等模板引擎将代码转换为楔形。 在 Javascript 中，您可以通过操作 Dom Node 导入 Jquery、Vue 或其他库来执行 ux。