2013-10-30 46 views
1

我要調用的函數,而在另一個js文件可用(myscript.js),但事情是我一直用下面的錯誤遭遇:如何從外部文件調用函數?

的ReferenceError:ChangeCreditView沒有定義

ChangeCreditView('DIV1 ',數據);

如果我錯了,那麼你建議調用這樣的函數是什麼?

myscript.js文件代碼

$(function() { 
function ChangeCreditView(elem, data) { 
    var groupTypes = null; 
    var $container = $(elem); 
    var groups = null; 
    //$.getJSON('/api/Groups', null, function (data) { 
    groups = data; 
    var $groupList = createGroupList(groups); 
    $container.append($groupList); 
    // }); 

    function createGroupList(groups) { 
     var $list = $('<ol id="selectable" />'); 
     $.each(groups, function (index, group) { 
      var $groupItem = createGroupItem(index, group).on('click', groupItemClick); 
      $list.append($groupItem); 
     }); 

     return $list; 
    } 

    function createGroupItem(index, group) { 
     return $('<li />') 
      .addClass('ui-widget-content') 
      .attr('data-index', index) 
      .html(group.Name); 
    } 

    function groupItemClick() { 
     var $groupItem = $(this), 
      index = $groupItem.attr('data-index'), 
      speedList = groups[index].GroupSpeeds; 

     $groupItem 
      .parent() 
      .find('li') 
      .removeClass('ui-selected'); 
     $groupItem.addClass('ui-selected'); 

     var $speedList = createSpeedList(speedList); 

     $container.append($speedList); 

     if ($('.traffic').length > 0) { 
      $('.traffic').remove(); 
     } 
    } 

    function createSpeedList(speedList) { 
     var $speedList = $('<ol id=selectable class="speed-list" />'); 

     $('.speed-list').remove(); 

     $.each(speedList, function (index, speed) { 
      if (!speed) 
       return; 
      var $speedItem = $('<li />') 
       .addClass('ui-widget-content') 
       .attr('data-index', index) 
       .html(speed.Speed) 
       .data('speed', speed) 
       .on('click', speedItemClick); 

      $speedList.append($speedItem); 
     }); 

     return $speedList; 
    } 

    function speedItemClick() { 
     var $speedItem = $(this), 
      $list = $('<ol id="selectable" class="traffic" style="width:auto;" />'), 

     groupTraffics = $speedItem.data('speed').GroupTraffics; 
     $(".traffic").remove(); 
     $.each(groupTraffics, function (i, t) { 
      var $li = $('<li />') 
       .addClass('ui-widget-content') 
       .attr('data-index', i) 
       .html(t.Traffic); 

      $list.append($li); 

      $.each(groupTraffics, function (i, groupTraffic) { 
       $li.on('click', function() { 
        var index = $(this).attr('data-index'); 

        $(this).parent().find('li').removeClass('ui-selected'); 
        $(this).addClass('ui-selectd'); 

        var traffics = groupTraffic[index].Traffic, 
         $trafficList = $('<ol id="selectable" />'); 

        $.each(traffics, function (i, traffic) { 
         if (traffic) { 
          var $trafficLi = $('<li />'); 
          $trafficLi 
             .addClass('ui-widget-content ') 
             .attr('data-index', i) 
             .html(traffic.Traffic); 

          $trafficList.append($trafficLi); 
         } 
        }); 

        $('body').append($trafficList); 
       }); 

       $(elem).append($list); 
      }); 
     }); 
    } 
} 

});

<html xmlns="http://www.w3.org/1999/xhtml"> 

#container的{ 寬度:300像素; }

#selectable .ui-selecting { 
     background: #FECA40; 
    } 

    #selectable .ui-selected { 
     background: #F39814; 
     color: white; 
    } 

    #selectable { 
     float: left; 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     /*width: 50%;*/ 
    } 

     #selectable li { 
      margin: 3px; 
      padding: 0.4em; 
      font-size: 1.4em; 
      height: 18px; 
     } 
</style> 

<link href="Scripts/JQUI/css/ui-lightness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" /> 
<script src="Scripts/jquery-2.0.3.min.js"></script> 
<script src="Scripts/JQUI/js/jquery-ui-1.10.3.custom.min.js"></script> 
<script src="Scripts/myscript.js"></script> 
<script> 
    $(function() { 
     $.getJSON('/api/Groups', function (data) { 

      ChangeCreditView('div1', data); 

     }); 

    }); 
</script> 

<div id="div1"> 
</div> 

回答

2

不要包裝在document.ready/$(function()函數(內myscript.js的功能),因爲它會成爲封裝,從而不可見在那個函數之外(document.ready)scope

變化

$(function() { 
    function ChangeCreditView(elem, data) { 
    ... 
    } 
}); 

function ChangeCreditView(elem, data) { 
... 
} 
相關問題