如何从外部文件调用函数？

Question

我想调用另一个js文件(myscript.js)中可用的函数，但问题是我经常遇到以下错误：

ReferenceError:未定义ChangeCreditView

ChangeCreditView(‘div1 1’，数据)；

如果我错了，你有什么建议叫这样的函数？

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 {             width: 300px;         }

    #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>

Answer 1

不要将函数封装在document.ready / $(function () (myscript.js中的函数)中，因为它将被封装，因此在该函数(document.ready) 作用域之外不可见。

变化

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

至

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