尝试使用JavaScript减少HTML代码的重复
您好,我最近一直在从事一个项目,其中有一个包含各种元素的滑块,当单击特定滑块元素上的“了解更多”按钮时,将打开一个弹出模式,其中包含所选滑块元素的特定详细信息。现在我的滑块变得很长,我有很多幻灯片和模型。我的幻灯片和modal之间共享的唯一元素是标题和图像位置,我一直在想,我是否可以使用JavaScript或任何东西使我的代码看起来更漂亮,并删除下面代码的重复模式是我的代码:尝试使用JavaScript减少HTML代码的重复,javascript,php,html,arrays,Javascript,Php,Html,Arrays,您好,我最近一直在从事一个项目,其中有一个包含各种元素的滑块,当单击特定滑块元素上的“了解更多”按钮时,将打开一个弹出模式,其中包含所选滑块元素的特定详细信息。现在我的滑块变得很长,我有很多幻灯片和模型。我的幻灯片和modal之间共享的唯一元素是标题和图像位置,我一直在想,我是否可以使用JavaScript或任何东西使我的代码看起来更漂亮,并删除下面代码的重复模式是我的代码: <!-- Slides 1 --> <div class="swiper-slide&quo
<!-- 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>
1.团队合作
在团队中出色工作的能力。这表明你有足够的成熟度去认识到没有一项工作是独立的
了解更多
2.决策
决策是通过确定决策和评估备选解决方案做出选择的过程。
了解更多
在我的代码中,我有许多幻灯片,当单击按钮“了解更多”时,应打开另一个代码,该代码重复如下:
<!-- 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>
1.团队合作
Lorem ipsum dolor坐在amet Concertetur,告别精英。这是一种不受惩罚的行为。罪魁祸首是什么?是否有必要对共和国的某些方面进行必要的劳动?清晰,塞德!维尼安?
接近
2.决策
Lorem ipsum dolor坐在amet Concertetur,告别精英。这是一种不受惩罚的行为。罪魁祸首是什么?是否有必要对共和国的某些方面进行必要的劳动?清晰,塞德!维尼安?
接近
我的问题是:是否有一种方法可以让我继续添加其他幻灯片和模式,从而减少JavaScript或PHP中重复的HTML模式,同时保持代码的完整性?滑块中的每个元素在打开各自的模式弹出窗口时是不同的,它们仅共享相同的图像位置和标题。但是,幻灯片和modal之间没有共享文本,我想知道JavaScript中的任何代码是否能帮助我获得更干净的代码,因为我的项目滑块正在增加如果您使用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;
?>
">
这叫做循环。到目前为止你尝试了什么?你可以使用php循环你的数据数组,或者使用ReactJS使用JS进行循环目前我还没有尝试使用单个滑块和id模式来填充它,运气不好,我还是新手,你能帮我吗?你在使用php还是html?我在使用php和javaScript
<?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;
?>