Javascript 使用jquery动态向img元素添加属性后，引导转盘不工作

如果你要告诉我，这个人所做的是不同的

我从外部js文件中的javascript变量获取3个图像的路径，并通过使用jquery添加src属性将它们添加到引导转盘中的img元素

这是外部文件中的javascript变量：

var bobmarley =

{

"id": "05",
"name": "Bob Marley Museum",
"location": "Hope Road , Kingston",
"duration": "6 hours",
"children": "Yes",
"roundtrip_price": "450",
"oneway_price": "340",
"addoneway": "40",
"addroundtrip": "50",
"agelimit": "4",
"img1": "images/bobmarley/first.jpg",
"img2": "images/bobmarley/second.jpg",
"img3": "images/bobmarley/third.jpg"

 }

我通过以下操作获得3个img变量：

    img1 = window[tourid].img1;
    console.log(img1);
    img2 = window[tourid].img2;
    console.log(img2);
    img3 = window[tourid].img3;
    console.log(img3);

请注意，路径已成功存储在局部变量中，并在控制台中正确显示

然后，我使用jquery函数将source属性添加到carosuel中的每个img元素

    $(document).ready(function () {


        $('.first').attr('src', img1);

        $('.second').attr('src', img2);


        $('.third').attr('src', img3);
         
         }
   

这是引导转盘

         <div id="carousel" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">

                        <div class="carousel-item-active">
                            <img id="img1" class="d-block w-100 first" alt="first slide">
                        </div>

                        <div class="carousel-item">
                            <img id="img2" class="d-block w-100 second" alt="second slide">
                        </div>

                        <div class="carousel-item">
                            <img id="img3" class="d-block w-100 third" alt="Third slide">
                        </div>

                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/ys_FALLS/ysFalls6.jpg" alt="fourth slide">
                        </div>
                    </div>
                    <a id="prev" class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a id="next" class="carousel-control-next" href="#carousel" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>

现在的情况是src属性被成功地添加到正确的路径中（我检查了chrome开发工具）。但是引导转盘中的下一个和上一个按钮不会改变幻灯片

我试过： -为每个img元素创建一个唯一的id，而不是使用类来选择它们（不起作用）

-根据引导文档更改旋转木马的间隔（无响应）

-使第二张幻灯片“激活”而不是第一张幻灯片（它正确显示了第二张幻灯片 但是按钮还是不起作用）

还要注意的是，我的javascript或jquery中没有错误，我的javascript或jquery之前有jquery文件路径

---

引导文件路径。

第一个旋转木马项目的类实际上应该是两个独立的类：

尝试更改：

<div class="carousel-item-active">
    <img id="img1" class="d-block w-100 first" alt="first slide">
</div>

致：

---

您的第一个旋转木马项目的类别实际上应该是两个独立的类别：

尝试更改：

<div class="carousel-item-active">
    <img id="img1" class="d-block w-100 first" alt="first slide">
</div>

致：

您在哪里初始化旋转木马？因为使用

data-ride

它将在DOM就绪的情况下进行计算，然后插入图像，然后旋转木马就像：不，不做prev/next，因为根据我的计算，没有什么可显示的。所以，也许，在插入图像后初始化旋转木马。顺便说一句，另一个想法是：在HTML中填充src。无论如何，您将覆盖src。如果这不起作用，请忘了我的评论^^这两种解决方案都不起作用，但还是要感谢您。您在哪里初始化旋转木马？因为使用

data-ride

它将在DOM就绪的情况下进行计算，然后插入图像，然后旋转木马就像：不，不做prev/next，因为根据我的计算，没有什么可显示的。所以，也许，在插入图像后初始化旋转木马。顺便说一句，另一个想法是：在HTML中填充src。无论如何，您将覆盖src。如果这不起作用，请忘了我的评论^^这些解决方案都不起作用，但还是要感谢你