#javascript #php #html #arrays
Вопрос:
Здравствуйте, в последнее время я работаю над проектом, в котором у меня есть слайдер с различными элементами, и при нажатии на кнопку «Узнать больше» на определенном элементе слайдера откроется всплывающее окно, содержащее конкретные сведения об этом выбранном элементе слайдера. Теперь мой слайдер становится действительно длинным, и у меня появляется множество слайдов и модальных. Единственный элемент, который разделяется между моим слайдом и модальным, — это заголовок и расположение изображения, и мне было интересно, могу ли я использовать 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>
Мой вопрос для этого таков: есть ли способ для меня продолжать добавлять другие слайды и модальные таким образом, чтобы уменьшить повторяющийся шаблон HTML в JavaScript или PHP, сохраняя при этом целостность моего кода ? Каждый элемент в слайдере отличается от другого, откройте соответствующее модальное всплывающее окно, у них только одно и то же местоположение изображения и заголовок. Текст, однако, не разделяется между слайдом и модальным, и мне было интересно, поможет ли мне какой-либо код на JavaScript с более чистым кодом, поскольку мой слайдер проекта увеличивается
Комментарии:
1. Это называется петля. Что вы пробовали до сих пор?
2. вы можете перебирать массив ваших данных с помощью php или использовать ReactJS для этого с помощью js
3. на данный момент не так много я пытался заполнить его с помощью одного ползунка и модального с идентификатором, но безуспешно, я все еще новичок в этом, можете ли вы помочь
4. используете php или просто html?
5. я использую php и JavaScript
Ответ №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 для обработки сложных задач интерфейса