javascript - 如何将数组结果拆分为两张幻灯片？

Question

我正在尝试将数组结果拆分为两张幻灯片。我的数组中有大约 50 多个条目。我想在每张幻灯片/页面上仅显示 14 个。我想在其他幻灯片/页面中显示剩余内容。

我尝试过的如下:

<div class="mySlides fade">
    <div class='content'>
        <div class="symptoms-container">
            <?php
                                          $slideCount = 1;
                                          $symptomCount = 1;
                                      ?>
                <div class="row">
                    <?php foreach($symptoms as $id => $symptom): ?>
                        <div class="col-md-6">
                            <ul class="check-list">
                                <li>
                                    <label class="label_check" for="symptom_<?php echo $symptom['id'] ?>">
                                        <input type="checkbox" data-gender="<?php echo $symptom['gender'] ?>" id="symptom_<?php echo $symptom['id'] ?>" name="symptom[<?php echo $symptom['id'] ?>]" value="<?php echo $symptom['id'] ?>" />
                                        <?php echo $symptom['title'] ?>
                                    </label>
                                </li>
                                <ul>
                        </div>
                        <?php $symptomCount++; ?>
                            <?php endforeach; ?>
                </div>
                <!--Row END-->
        </div>
    </div>
</div>

上面的代码在一页中显示所有症状/数据/条目，我想要一张幻灯片中的前 14 个，第二张幻灯片中的第二个 14，依此类推。我希望这是有道理的。 幻灯片代码:

<div class="mySlides fade">
    <div class='content'>
        First Slide
    </div>
</div>
</div>


<div class="mySlides fade">
    <div class='content'>
        This is a form and symptoms data 2
    </div>
</div>

            <div style="text-align:center">
              <span class="dot" onclick="currentSlide(1)"></span>
              <span class="dot" onclick="currentSlide(2)"></span>
              <span class="dot" onclick="currentSlide(3)"></span>
            </div><!-- Slider Next Prev Buttons End -->

JS:

var slideIndex = 1;
        showSlides(slideIndex);

        function plusSlides(n) {
            showSlides(slideIndex += n);
        }

        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            if (n > slides.length) {slideIndex = 1}
            if (n < 1) {slideIndex = slides.length}
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex-1].style.display = "inline";
            dots[slideIndex-1].className += " active";
        }

感谢您的宝贵时间。任何帮助将不胜感激。如果需要进一步的要求，请告诉我。

非常感谢。

Answer 1

您可以使用 array_chunk 拆分数组并循环每个 block 。

总体思路:

$symptoms = range(1,50); // your array

$chunks = array_chunk($symptoms, 14); // split it to chunks of 14

foreach($chunks as $chunk){
    echo "<div class='mySlides fade'>\n<div class='content'>\n"; // the html that creates the slide
    foreach($chunk as $symptom){
        echo $symptom . "\n"; // echoes 14 symptoms
    } 
    echo "</div>\n</div>\n"; 
}

https://3v4l.org/K5smh