jquery传递插件回调到另一个插件作为参数

时间:2013-12-28 17:43:54

标签: jquery json jquery-plugins parameter-passing

我开发了一个插件,可以从在线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上看到。

谢谢大家的帮助。

0 个答案:

没有答案