javascript - 我从 SP2013 中的列表（图像字段、标题字段和描述字段）创建了一个轮播。需要标题和描述才能默认显示

Question

物品拉动正确，旋转木马工作正常。我需要做的是默认显示第一个项目的标题和描述。现在图像正在显示，但描述框是空的；它们仅在单击图像时显示，我也希望发生这种情况，但是一旦页面加载，我就需要显示标题和描述。

var buildCarousel = function (items) {
  $.each(items,function(i,item){
                var cInnerHtml="";
                if(i=0){
                    $("#carouselNav").append('<div class="carousel-cell></div>');
                    cInnerHtml+='<div class="carousel-cell  is-nav-selected">'; 

                }else{                  
                    $("#carouselNav").append('<div class="carousel-cell></div>');
                    cInnerHtml+='<div class="carousel-cell ">';               
                }
                cInnerHtml+='<img src="'+item.Image.Url+'" alt="'+item.Title+'" style="width:100%;">';
                cInnerHtml+='<div class="carousel-caption" style="display:none;"><h2>'+item.Title+'</h2><p>'+item.Description+'</p></div></div>';
                $("#carouselNav").append(cInnerHtml); 
                 $("#flickityCarousel").append(cInnerHtml);                
            });
                  $("#carouselNav img").click(function(){
                $(".carouselCaption").html($(this).next().html());
            });
};

//ajax call
var url1 = "/FunZone/_api/web/lists/GetByTitle('funZone')/items?$orderby=Created asc";
var handle_ajax = function (url) {
    $.ajax({
        url: url,
        method: "GET",
        headers: {
            Accept: "application/json; odata=verbose"
        },
        success: function (data) {
            var items = data.d.results;
            console.log(items);

            buildCarousel(items);
        },
        error: function (data) {
            console.log("Error: " + data);
        }

    });

};

handle_ajax(url1);

<div id="flickityCarousel" class="carousel carousel-main" data-flickity="{&quot;pageDots&quot;: false, &quot;wrapAround&quot;: true, &quot;prevNextButtons&quot;: false}">
                            <!--Code injected here-->
                        </div>
                    </section>
                    <div id="carouselNav" class="carousel carousel-nav" data-flickity="{ &quot;asNavFor&quot;: &quot;.carousel-main&quot;, &quot;contain&quot;: true, &quot;pageDots&quot;: false,&quot;prevNextButtons&quot;: false }">
                        <!--Code injected here-->
                    </div>
                    <section id="captionContainer" class="carouselCaption mb-1">
                        <!--Code injectedhere-->
                    </section>
                </div>

标签： javascriptjqueryhtmlsharepoint

Answer 1

这有效

var buildCarousel = function (items) {
          var initialTitle = items[0].Title;
          var initialDescription = items[0].Description;
          var initialText ='<h2>'+ initialTitle+'</h2><p>'+ initialDescription+'</p>';
                 $(".carouselCaption").append(initialText);
  $.each(items,function(i,item){
                var cInnerHtml="";

                if(i=0){
                    $("#carouselNav").append('<div class="carousel-cell></div>');
                    cInnerHtml+='<div class="carousel-cell  is-nav-selected">'; 

                }else{                  
                    $("#carouselNav").append('<div class="carousel-cell></div>');
                    cInnerHtml+='<div class="carousel-cell ">';               
                }
                cInnerHtml+='<img src="'+item.Image.Url+'" alt="'+item.Title+'" style="width:100%;">';
                cInnerHtml+='<div class="carousel-caption" style="display:none;"><h2>'+item.Title+'</h2><p>'+item.Description+'</p></div></div>';
                $("#carouselNav").append(cInnerHtml); 
                 $("#flickityCarousel").append(cInnerHtml);                
            });
                  $("#carouselNav img").click(function(){
                $(".carouselCaption").html($(this).next().html());
            });
};

//ajax call
var url1 = "/FunZone/_api/web/lists/GetByTitle('funZone')/items?$orderby=Created asc";
var handle_ajax = function (url) {
    $.ajax({
        url: url,
        method: "GET",
        headers: {
            Accept: "application/json; odata=verbose"
        },
        success: function (data) {
            var items = data.d.results;
            console.log(items);

            buildCarousel(items);
        },
        error: function (data) {
            console.log("Error: " + data);
        }

    });

};

handle_ajax(url1);