Question

我正在使用javascript Kinetic和jQuery创建html页面。当我在关闭的路径上释放鼠标按钮时，chrome会在动力学脚本中给出以下错误：

未捕获TypeError：$不是函数（匿名函数）@ （索引）：319Kinetic.Node._executeHandlers @ kinetic-v4.3.3.min.js：28Kinetic.Node.fire @ kinetic-v4.3.3.min.js：28Kinetic.Node._handleEvent @ kinetic-v4.3.3.min.js：28Kinetic.Stage._mousedown @ kinetic-v4.3.3.min.js：33（匿名函数）@ 动能v4.3.3.min.js：33

我哪里错了？以下是html和javascript代码...

 <html> 
 <head>

     <link href="templates/myTemplates/css/mapStyle.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="templates/myTemplates/js/kinetic-v4.3.3.min.js"></script>
    <script type="text/javascript" src="media/jui/js/jquery.min.js"></script>
    <script type="text/javascript" src="templates/myTemplates/js/InteractiveItalyMapData.js"></script>
    <script type="text/javascript" src="templates/myTemplates/js/InteractiveLazioMapData.js"></script>
    <script type="text/javascript" src="templates/myTemplates/js/InteractiveCampaniaMapData.js"></script>

  </head>
  <body>
    <div id="containerItaly"></div>
    <div id="containerLazio" style="display:none"></div>
    <div id="containerCampania" style="display:none"></div>

    <div id="contextMenu" style="display:none">
        <div id="contextMenuH"></div>
        <div id="contextMenuB"></div>
    </div>

        <script type="text/javascript">

        function drawTooltip(tooltip, x, y, text) {
            tooltip.setText(text);
            var maxRight = 530;
            if (x > maxRight) {
                x = maxRight;
            }

            tooltipBackground.setPosition(x, y);
            tooltipBackground.show();
            tooltipBackground.getLayer().draw();

            tooltip.setPosition(x, y);
            tooltip.show();
            tooltip.getLayer().draw();

            //set background width
            tooltipBackground.setWidth(tooltip.getWidth());
        ;}

            var stageItaly = new Kinetic.Stage({
                container: "containerItaly",
                width: 800,
                height: 600
            });

            var mapLayerItaly = new Kinetic.Layer({
                x: -188,
                y: -32,
                scale:1,
                opacity: 0.4
            });

            var stageLazio = new Kinetic.Stage({
                container: "containerLazio",
                width: 800,
                height: 600
            });
            var mapLayerLazio = new Kinetic.Layer({
                x: 0,
                y: 0,
                scale:1,
                opacity: 0.4
            });

            var stageCampania = new Kinetic.Stage({
                container: "containerCampania",
                width: 800,
                height: 600
            });
            var mapLayerCampania = new Kinetic.Layer({
                x: 0,
                y: 0,
                scale:1,
                opacity: 0.4
            });

            /*
            * throttle the tooltip layer down a bit
            * so that the tooltip doesn't lag behind the
            * mouse too much on redraw
            */
            var tooltipLayerItaly = new Kinetic.Layer({
                throttle: 50
            });

            var tooltipLayerLazio = new Kinetic.Layer({
                throttle: 50
            });

            var tooltipLayerCampania = new Kinetic.Layer({
                throttle: 50
            });

            var tooltipBackground = new Kinetic.Rect({
                height: 25,
                fill: "white",
                stroke: "black",
                visible: false,
                strokeWidth: 1,
                opacity:1
            });

            // build tooltip
            var tooltipItaly = new Kinetic.Text({
                text: "",
                textFill: "#fff",
                fontFamily: "Calibri",
                fontSize: 16,
                padding: 5,
                fill: "#000",
                visible: false
            });
            var tooltipLazio = new Kinetic.Text({
                text: "",
                textFill: "#fff",
                fontFamily: "Calibri",
                fontSize: 16,
                padding: 5,
                fill: "#000",
                visible: false
            });
            var tooltipCampania = new Kinetic.Text({
                text: "",
                textFill: "#fff",
                fontFamily: "Calibri",
                fontSize: 16,
                padding: 5,
                fill: "#000",
                visible: false
            });            

             //background color
            tooltipLayerItaly.add(tooltipBackground);
            tooltipLayerItaly.add(tooltipItaly);

            tooltipLayerLazio.add(tooltipBackground);
            tooltipLayerLazio.add(tooltipLazio);

            tooltipLayerCampania.add(tooltipBackground);
            tooltipLayerCampania.add(tooltipCampania);

            var previousK = "";

            // get areasItaly data
            var areasItaly = getItalyData();
            // draw areasItaly
            for (var key in areasItaly) {
                (function () {
                    //alert(key);
                    var area = areasItaly[key];
                    var c = area.data;

                    var k = key;
                    var containerToShow="#container"+k;
                    var pathItaly = new Kinetic.Path({
                        data: c,
                        fill: '#fff',
                        stroke: '#555',
                        strokeWidth: .5
                    });

                    pathItaly.on("mouseover", function () {
                        this.setFill('#0D0000');
                        this.setOpacity(1);
                        mapLayerItaly.drawScene();
                    });

                    pathItaly.on("mouseout", function () {
                        this.setFill('#fff');
                       // this.setAlpha(0.1);
                        mapLayerItaly.drawScene();
                        tooltipBackground.hide();
                        tooltipItaly.hide();
                        tooltipLayerItaly.drawScene();
                    });

                    pathItaly.on("mouseup", function () {
                        $('#containerItaly').hide();
                        $(containerToShow).show();
                    });

                    pathItaly.on("mousemove", function () {
                        var mousePos = stageItaly.getMousePosition();
                        var x = mousePos.x + 5;
                        var y = mousePos.y + 10;

                        drawTooltip(tooltipItaly, x, y, k);

                        //keep track of previous key
                        if (previousK !== k) {
                            previousK = k;
                            previousSelected = this;
                            //hide the menu if different contry path is selected
                            $("[id$='contextMenu']").css({
                                display: 'none'
                            });
                        }
                    });

                    pathItaly.on("mousedown", function (e) {
                        $("[id$='contextMenu']").css({
                            display: 'inline',
                            position: 'absolute',
                            top: e.pageY,
                            left: e.pageX + 5,
                            opacity: .8
                        });

                        //menu header
                        $("[id$='contextMenuH']").html('');
                        //flag
                        $('<img />').attr('src', area.flag).appendTo($("[id$='contextMenuH']"));
                        $('<span />').html(k).appendTo($("[id$='contextMenuH']"));
                        //$("[id$='contextMenuH']").html(k);

                        //build links

                        $("[id$='contextMenuB']").html(''); //clear

                        //countryReports
                        $('<a target="_blank"></a>')
                            .attr('href', 'http://www.countryreports.org/country/' + k + '.htm')
                            .html('Country Reports').appendTo($("[id$='contextMenuB']"));
                        //Economy
                        $('<br/><a target="_blank"></a>')
                            .attr('href', 'http://www.economicexpert.com/a/' + k + '.htm')
                            .html('Economy').appendTo($("[id$='contextMenuB']"));
                        //The world Factbook
                        $('<br/><a target="_blank"></a>')
                            .attr('href', 'https://www.cia.gov/library/publications/the-world-factbook/geos/' + area.abbreviation + '.html')
                            .html('Factbook').appendTo($("[id$='contextMenuB']"));
                        //Global Statistics
                        $('<br/><a target="_blank"></a>')
                            .attr('href', 'http://www.geohive.com/cntry/' + k + '.aspx').html('Global Statistics')
                            .appendTo($("[id$='contextMenuB']"));
                        //Wiki
                        $('<br/><a target="_blank"></a>').attr('href', 'http://en.wikipedia.org/wiki/' + k).html('Wiki').appendTo($("[id$='contextMenuB']"));
                    });

                    mapLayerItaly.add(pathItaly);
                } ());
            }
            stageItaly.add(mapLayerItaly);
            stageItaly.add(tooltipLayerItaly);       
  </body>
</html>

Answer 1

如果Kinetic依赖于jQuery，则需要在之前包含jQuery脚本。这是因为依赖于jQuery的任何半正式的库都是这样的：

(function($) { // Using `$` here for accessing jQuery })(jQuery);

...如果使用noConflict。

如果Kinetic字面上使用上面的代码，你会看到一个不同的，更主动的错误，但如果他们使用这样的东西：

(function($) { // Using `$` here for accessing jQuery })(window.jQuery);

...在Kinetic尝试使用$之前你不会收到错误，因为window.jQuery将是undefined（因为jQuery没有被加载），所以这就是得到的传入。

Answer 2

我不知道我是否理解......我包括第一个jQuery，然后是Kinetic，如下所示：

<script type="text/javascript" src="media/jui/js/jquery.min.js"></script> <script type="text/javascript" src="templates/myTemplates/js/kinetic-v4.3.3.min.js"></script>

然后我放入第24行（<script type="text/javascript">之后）：

jQuery.noConflict();

没错？

Html Kinetic错误javascript Uncaught TypeError：$不是函数

2 个答案: