php - Jquery .each() 仅适用于第二次迭代应该工作到 n div 迭代

Question

我已经编写了处理图像幻灯片的代码 - 轮播引导幻灯片。我面临的一个问题是，当我根据我的算法发现图像显示并加载为 HTML 时，但是当 JQuery 循环工作时，我看到第一张和第二张图像出现，但所有其余图像都没有滑过。我们的算法应该以这样一种方式工作，即我让所有图像遍历图像幻灯片并从最后一个遍历到第一个。在那个过程中，我需要代码来工作，就好像它是为了使图像幻灯片放映适用于所有图像一样，并确保为每个图像编写代码，无论我遍历我拥有的图像堆栈时有多少图像放在一起幻灯片通过我们的图像幻灯片放映。当我转到 HTML 页面时，我必须发现代码的编写方式适用于幻灯片中的每个图像并遍历每个图像 JQuery 循环简单直接，但代码并没有考虑到每个图像。所以我要求我们所有人找出一个算法基础当前代码，JQuery 代码算法适用于从第一张图像到最后一张图像的每个图像，然后返回到第一张图像并继续这样做。

$(document).ready(function() {

    $('div .carousel-item').each(function(){

        $('.carousel-item').delay(4000).removeClass('active');

        $('.carousel-item').next().addClass('active').nextAll().removeClass('active');

    });
});

上面的代码适用于前两张幻灯片，但随后进入第二张幻灯片，但第三张幻灯片没有显示。我要求它适用于每个 div，内容代码如下：

        <div class="carousel-inner">
            <?php
                $j = 0;
                foreach($employers as $employer){

                    if($j==0){

                        $active = ' active';
                    }else{

                        $active = '';
                    }

                    echo '<div class="carousel-item'.$active.'">
                        '.$this->Html->image($employer['image'], ['alt'=>'employer image',
                                                                  "class"=>"d-block w-100"]).'
                        <div class="carousel-caption d-none d-md-block">
                            <h5>'.$employer['name'].'</h5>
                            <p>'.
                                $employer['brief'].
                                $employer['desg'].
                                $employer['created'].
                            '</p>
                        </div>
                    </div>';
                    $j++;

                }
            ?>

        </div>

建议使用 JQuery 滑动每个 div。

HTML 代码如下：

<div id="carouselEmployerDiv" class="carousel slide" data-ride="carousel" style="margin: 20px;">
            <ol class="carousel-indicators">
                <li data-target="#carouselEmployer" data-slide-to="0" class=""></li><li data-target="#carouselEmployer" data-slide-to="1" class="active"></li><li data-target="#carouselEmployer" data-slide-to="2" class=""></li><li data-target="#carouselEmployer" data-slide-to="3" class=""></li><li data-target="#carouselEmployer" data-slide-to="4" class=""></li>              
            </ol>

            <div class="carousel-inner">
                <div class="carousel-item">
                            <img src="/sd/sd/img/DDU_GKY_Electrician_Skills.JPG" alt="employer image" class="d-block w-100">
                            <div class="carousel-caption d-none d-md-block">
                                <h5>dsa</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti quam voluptatum vel repellat ab similique molestias molestiae ea omnis eos, id asperiores est praesentium, voluptate officia nulla aspernatur sequi aliquam.ex1/11/20, 12:00 AM</p>
                            </div>
                        </div><div class="carousel-item active">
                            <img src="/sd/sd/img/World_%20Youth_Skill_Day_2019.JPG" alt="employer image" class="d-block w-100">
                            <div class="carousel-caption d-none d-md-block">
                                <h5>name </h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti quam voluptatum vel repellat ab similique molestias molestiae ea omnis eos, id asperiores est praesentium, voluptate officia nulla aspernatur sequi aliquam.

desg1/13/20, 12:00 AM</p>
                            </div>
                        </div><div class="carousel-item">
                            <img src="/sd/sd/img/Scheme_and_Logo_%20Launch.jpeg" alt="employer image" class="d-block w-100">
                            <div class="carousel-caption d-none d-md-block">
                                <h5>name me </h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti quam voluptatum vel repellat ab similique molestias molestiae ea omnis eos, id asperiores est praesentium, voluptate officia nulla aspernatur sequi aliquam.

desg q1/13/20, 12:00 AM</p>
                            </div>
                        </div><div class="carousel-item">
                            <img src="/sd/sd/img/Office_RSLDC-Kaushal_Bhawan.jpg" alt="employer image" class="d-block w-100">
                            <div class="carousel-caption d-none d-md-block">
                                <h5>name my </h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti quam voluptatum vel repellat ab similique molestias molestiae ea omnis eos, id asperiores est praesentium, voluptate officia nulla aspernatur sequi aliquam.

desg pos1/13/20, 12:00 AM</p>
                            </div>
                        </div><div class="carousel-item">
                            <img src="/sd/sd/img/SKOCH_Award.JPG" alt="employer image" class="d-block w-100">
                            <div class="carousel-caption d-none d-md-block">
                                <h5>name e</h5>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti quam voluptatum vel repellat ab similique molestias molestiae ea omnis eos, id asperiores est praesentium, voluptate officia nulla aspernatur sequi aliquam.

desg posi1/13/20, 12:00 AM</p>
                            </div>
                        </div>    
            </div>

            <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
        </div>

我发现代码不超过某个迭代的问题是可以运行类似的 JQuery 脚本，至少有一个计时器来运行脚本，所以它会一直运行到页面原样。

标签： phpjqueryhtmlcakephp-4.x