旋转木马不能正常工作

时间:2018-03-09 10:07:35

标签: jquery ajax twitter-bootstrap laravel carousel

我有在旋转木马引导程序中显示的图像:

  `$.getJSON("http://127.0.0.1/CM/public/calendar/getimg/"+data.id, function(data) 
                {   

                    var div = $("<div id='carousel-example-captions-1' data-ride='carousel' class='carousel slide'>");
                        var ol = $(" <ol class='carousel-indicators'> ");
                        $.each(data, function(key,value)
                        {
                            if(key == '0')
                            {
                                ol.append("<li data-target='#carousel-example-captions1' data-slide-to='' class='active'>");
                                ol.find('li').attr("data-slide-to",key);
                                ol.append("</li>");
                            }
                            else
                            {
                                ol.append("<li data-target='#carousel-example-captions' data-slide-to='' ></li>");
                                ol.find('li').attr("data-slide-to",key);
                                ol.append("</li>");
                            }

                        });
                        ol.append(" </ol> ");
                    div.append(ol);

                        var div2 = $("<div role='listbox' class='carousel-inner' >")
                        $.each(data, function(key,value)
                        { //loop through it
                            var img = "http://127.0.0.1/CM/public/"+value.path;
                            console.log(img);

                            if(key == '0')
                            {
                              var item = $("<div class='item active' >");  
                            }
                            else
                            {
                               var item = $("<div class='item' >");
                            }

                            item.append("<img src=''>");
                            item.find('img').attr( "src", img );
                            item.append("</div>");
                            div2.append(item);
                        });
                        div2.append("</div> ");
                        div.append(div2);
                    $("#albums").append(div);
                });`

当我检查元素时,似乎旋转木马得到相同的键,所以现在我不能在图像上滑动我做错了什么?

1 个答案:

答案 0 :(得分:1)

当你给他们ID时,请确保它们是独一无二的。 例如

ol.append("<li data-target='#carousel-example-captions' data-slide-to='' class='active'>");

应该是:

ol.append("<li data-target='#carousel-example-captions"+key+"' data-slide-to='' class='active'>");