У меня есть список Sharepoint с 3 столбцами: изображение, заголовок и описание. Я пытаюсь получить предметы через ajax. Изображения, которые я могу получить успешно, и идея заключается в том, что, когда я нажимаю на изображения, я получаю заголовок и описание для изображения, на которое нажали. После нажатия на изображение в консоли отображается первое название и первое описание в списке независимо от того, на какие изображения я нажимаю. После нажатия на изображение заголовок и описание должны добавляться в div с идентификатором # captionContainer.
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);