我有一个包含 3 列的 Sharepoint 列表:图像、标题和说明。我正在尝试通过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);
最佳答案
我们可以使用 Bootstrap Image carousel 和 SharePoint REST API 结合 jQuery Ajax 来实现它,以下示例供您引用。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carouselCaption {
background-color: #fee601;
padding: 20px 20px 5px 20px;
border: 4px solid #000;
box-shadow: 5px 6px 0px #000;
}
</style>
<script type="text/javascript">
$(function() {
var listName="funZone";
GetImagesFromLibrary(listName);
});
function GetImagesFromLibrary(listName){
var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('"+listName+"')/items?$top=5&$orderby=Created desc";
$.ajax({
url: requestUri,
method: "GET",
async:false,
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
$.each(data.d.results,function(i,item){
var cInnerHtml="";
if(i==0){
$("#myCarousel .carousel-indicators").append('<li data-target="#myCarousel" data-slide-to="0" class="active"></li>');
cInnerHtml+='<div class="item active">';
}else{
$("#myCarousel .carousel-indicators").append('<li data-target="#myCarousel" data-slide-to="'+i+'"></li>');
cInnerHtml+='<div class="item">';
}
cInnerHtml+='<img src="'+item.Image.Url+'" alt="'+item.Title+'" style="width:100%;">';
cInnerHtml+='<div class="carousel-caption" style="display:none;"><h3>'+item.Title+'</h3><p>'+item.Description+'</p></div></div>';
$("#myCarousel .carousel-inner").append(cInnerHtml);
});
$(".carousel-inner img").click(function(){
$(".carouselCaption").html($(this).next().html());
});
},
error: function (data) {
}
});
}
</script>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<section class="carouselCaption mb-1">
</section>
关于javascript - 我试图在单击图像时从 Sharepoint 列表中检索信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58223911/