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

#コンテナ { 幅: 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>

4

1 に答える 1

2

document.ready/ (myscript.js 内の関数)で関数をラップしないでください$(function ()。カプセル化されるため、その関数 (document.ready)スコープの外では表示されません。

変化する

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

に

function ChangeCreditView(elem, data) {
...
}
于 2013-10-30T20:22:20.833 に答える