[我试图在单击图像时从Sharepoint列表中检索信息

Question

我有一个包含三列的共享点列表：图像，标题和描述。我正在尝试通过Ajax检索项目。我可以成功获取图像，其想法是，当我单击图像时，我会获取所单击图像的标题和说明。单击图像后，无论单击的图像如何，列表中的第一个标题和第一个描述都是我在控制台中得到的。单击图像后，标题和描述必须附加到ID为#captionContainer的div上。

var buildMainCarousel = function (items) {
    var flickitySlider = $('#flickityCarousel');
    var carouselContent;

    for (var i = 0; i < items.length; i++) {
        carouselContent = '<div class="carousel-cell">' +
            '<img src=" ' + items[i].Image.Url.replace("http://bc-net", "") + '"" alt="">' +
            '</div>';
        console.log(carouselContent);
        flickitySlider.append(carouselContent);
    }

};

var buildCaptions = function (items) {
    var captionContainer = $('#captionContainer');

 $(".carousel-cell img").click(function() {
    var clickedThumb= $(this);
        var title = items[i].Title;
        var description = items[i].Description;
       console.log(title);
        console.log(description);

});

};

var url1 = "/FunZone/_api/web/lists/GetByTitle('funZone')/items";
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);

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

    });

};

handle_ajax(url1);

Answer 1

我们可以将Bootstrap Image轮播和SharePoint REST API与jQuery Ajax结合使用，以下示例供您参考。