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

【问题标题】：How to make html code less repetitive using PHP?如何使用 PHP 减少 html 代码的重复性？
【发布时间】：2021-05-29 11:55:35
【问题描述】：

我有一个包含各种元素的滑块，当单击特定元素上的按钮时，将打开一个弹出窗口，其中包含该选定元素的特定详细信息。现在我的滑块变得非常长，我一直在想是否可以使用 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 模式，同时保持代码的完整性？

【问题讨论】：

标签： javascript php html arrays

【解决方案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>

【讨论】：

【解决方案2】：

在 PHP 中，您可以使用 Smarty 之类的模板引擎并将代码打包到一个wedget。在Javascript中你可以通过操作Dom Node导入Jquery、Vue或其他库来enfore ux。

【讨论】：