我开发了一个插件,可以从在线JSON文件中获取数据,并为OWL Carousel创建一个带img元素的div。
OWL Carousel本身有一个从JSON文件中获取自定义数据的选项,但是作为参数有成功回调$ .getJSON内置到carousel中,它需要写在同一个文件中。现在我只想将此参数传递给我的插件,该插件是在单独的文件中编写的,因此它在那里构建函数并将结果传递回carousel。
我的插件代码是:
(function ($) {
$.fn.matchCarousel = function(options) {
var settings = { 'maxMatches': 10,
'success': null };
if (options) { $.extend(settings, options); }
var url = "url-from-online-json-file";
$.getJSON(url, function (data) {
var counter = 0;
$.each(data.doc[0].data[0].realcategories, function (index, value) {
var realCat = this.name;
$.each(this.tournaments, function (x, y) {
tourName = this.name;
var tourSeasName = this.seasontypename;
$.each(this.matches, function (i, j) {
var resultHome = this.result.home;
var resultAway = this.result.away;
var teamHome = this.teams.home.name;
var teamHomeId = this.teams.home.uid;
var teamAway = this.teams.away.name;
var teamAwayId = this.teams.away.uid;
var time = this._dt.time;
var date = this._dt.date;
var statusId = this.status._id;
var statusName = this.status.name;
var matchId = this._id;
var content = $('div.slider div#owl-demo').append('<div id="' + index + i + '" class="item"><img id="' + index + i + '" class="slider ' + index + i + '" alt="' + realCat + ': ' + tourName + ' - ' + tourSeasName + '" /><p class="league">' + tourName + ' - ' + tourSeasName + '</p><p class="catName">' + realCat + '</p><div class="teams"><div class="team1"><img src="http://ls.betradar.com/ls/crest/big/' + teamHomeId + '.png" alt="' + teamHome + '"/ ><p class = "teamName">' + teamHome + '</p></div><div class="data"></div><div class="team2"><img src="http://ls.betradar.com/ls/crest/big/' + teamAwayId + '.png" alt="' + teamAway + '"/ ><p class = "teamName">' + teamAway + '</p></div></div><div class="statusName"></div></div>');
var itemData = $('.item[id=' + index + i + '] .data');
var itemStatus = $('.item[id=' + index + i + '] .statusName');
if (statusId == 0) {
$('img[id=' + index + i + ']').attr('src', 'images/bg-prematch.jpg');
itemData.html('<p class="dataText"><p class="vs">VS</p>' + time + '<br><span class="dateText">' + date + '</span></p>');
itemStatus.html('<span class="statusNameNS">' + statusName + '</span>');
} else if (statusId == 100) {
$('img[id=' + index + i + ']').attr('src', 'images/bg-postmatch.jpg');
itemData.html('<p class="result">' + resultHome + ':' + resultAway + '</p>');
itemStatus.html('<span class="statusNameEnd">' + statusName + '</span>');
} else {
$('img[id=' + index + i + ']').attr('src', 'images/bg-live.jpg');
itemData.html('<p class="result">' + resultHome + ':' + resultAway + '</p>');
itemStatus.html('<span class="statusNameMid">' + statusName + '</span>');
}
counter++;
return counter < settings['maxMatches'];
});
return counter < settings['maxMatches'];
});
return counter < settings['maxMatches'];
});
});
}
})(jQuery);
jsonSuccess参数是回调,逻辑应该像这样实现(来自所有者文档):
$(document).ready(function() {
$("#owl-demo").owlCarousel({
jsonPath : 'url-from-online-json-file',
jsonSuccess : customDataSuccess
});
function customDataSuccess(data){
var content = "";
for(var i in data["items"]){
var img = data["items"][i].img;
var alt = data["items"][i].alt;
content += "<img src=\"" +img+ "\" alt=\"" +alt+ "\">"
}
$("#owl-demo").html(content);
}
});
所以我不想在这个文件中创建“函数customDataSuccess(data){}”,即使旋转木马要求我这样做,但要作为参数传递给我的插件然后我的插件会将值返回到轮播。我的插件是这样启动的:
$(document).matchCarousel();
那么如何在与OWL轮播相同的文件中启动我的插件,但是将carousel参数的jsonSuccess值作为参数传递给我的插件,然后将值传递给carousel?因为如果我以任何其他方式这样做,轮播就无法识别构建的HTML结构。
代码也可以在jsFiddle上看到。
谢谢大家的帮助。