Question

对于我的生活，我看不出自己错过了什么。我在drawmenu函数中对selectedIcon的值进行了硬编码。它完美地工作，直到我将其更改为参数。我收到以下错误：

错误：this.call不是函数

源文件：   http://localhost:9090/tests/jquery-1.3.2.min.js

行：19

例程正在绘制菜单，同时动态调整图像之间的间距。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>
        Test image overlay
    </title>
    <script type="text/javascript" src="jquery-1.3.2.min.js">
    </script>
    <script type="text/javascript">
        //<![CDATA[

        function drawmenu (selectedIcon) {

            var offset = 0;
            for (x in icons) {
                // Add the gap at the top of the image
                if (selectedIcon-1 == x) {
                    offset += icons[x].topBig;
                    $("#"+icons[x].divid).toggleClass("active");
                    $("#"+icons[x].imgid).toggleClass("rollit");
                } else {
                    offset += icons[x].topSmall;
                }

                // Set the location of the image
                $("#"+icons[x].divid).css("top",-offset);

                // Add the gap at the bottom of the image
                if (selectedIcon-1 == x) {
                    offset += icons[x].bottomBig;
                } else {
                    offset += icons[x].bottomSmall;
                }
                $("#"+icons[x].imgid).attr("src",icons[x].image);
            }
        }

        var icons = [
            {
                "divid"       : 'icon1', // Home
                "imgid"       : 'imgicon1',
                "image"       : 'home.png',
                "topSmall"        : 5,
                "topBig"          : 5,
                "bottomSmall" : 5,
                "bottomBig"   : 7
            },{
                "divid"       : 'icon2', // Alert
                "imgid"       : 'imgicon2',
                "image"       : 'alert.png',
                "topSmall"    : 7,
                "topBig"      : 13,
                "bottomSmall" : 0,
                "bottomBig"   : 0
            },{
                "divid"       : 'icon3', // Question
                "imgid"       : 'imgicon3',
                "image"       : 'question.png',
                "topSmall"    : 4,
                "topBig"      : 8,
                "bottomSmall" : 5,
                "bottomBig"   : 7
            },{
                "divid"       : 'icon4', // Lightbulb
                "imgid"       : 'imgicon4',
                "image"       : 'lightbulb.png',
                "topSmall"        : 3,
                "topBig"          : 7,
                "bottomSmall" : 5,
                "bottomBig"   : 7
            },{
                "divid"       : 'icon5', // Blog
                "imgid"       : 'imgicon5',
                "image"       : 'blog.png',
                "topSmall"        : 3,
                "topBig"          : 6,
                "bottomSmall" : 1,
                "bottomBig"   : 4
            },{
                "divid"       : 'icon6', // Defect
                "imgid"       : 'imgicon6',
                "image"       : 'defect.png',
                "topSmall"        : 7,
                "topBig"          : 10,
                "bottomSmall" : 0,
                "bottomBig"   : 0
            }]

        $(document).ready(drawmenu(6));
        //]]>
    </script>
    <style type="text/css">
        /*<![CDATA[*/
        #iconstack {
            position: absolute;
            top:30px;left:100px;
        }
        .icondiv { z-index:1; position: relative;}

        .active { height:80px; }

        .rollit {
            height:50px;
        }

        .rollit:hover {
            background-image:url('highlight.png');
            background-color:red;

        }

        /*]]>*/
    </style>
</head>
<body>
<div id="iconstack">
    <div id="icon1" class="icondiv">
        <img id="imgicon1" class="rollit" src="" alt="" />
    </div>
    <div id="icon2" class="icondiv">
        <img id="imgicon2" class="rollit" src="" alt="" />
    </div>
    <div id="icon3" class="icondiv">
        <img id="imgicon3" class="rollit" src="" alt="" />
    </div>
    <div id="icon4" class="icondiv">
        <img id="imgicon4" class="rollit" src="" alt="" />
    </div>
    <div id="icon5" class="icondiv">
        <img id="imgicon5" class="rollit" src="" alt="" />
    </div>
    <div id="icon6" class="icondiv">
        <img id="imgicon6" class="rollit" src="" alt="" />
    </div>
</div>
</body>
</html>

Answer 1

这实际上是一个小问题。你以前做的是这个：

$(document).ready(drawmenu);

传递了一个函数。你现在正在做的是：

$(document).ready(drawmenu(6));

第二种方法是传递函数的RESULT而不是函数本身，相当于：

var item = drawmenu(6);
$(document).ready(item);

尝试改为：

$(document).ready(function(){ drawmenu(6); });

Answer 2

你的问题在这条线的底部附近。

$(document).ready(drawmenu(6));

你需要的是什么。

$(document).ready(function() {
    drawmenu(6);
});

基本上不是将函数传递给.ready，而是传递drawmenu函数的任何返回值。

Answer 3

你正在调用drawmenu而不是将它作为参数传递给jQuery的ready函数。修复是创建一个新函数并将该函数传递给jQuery：

 $(document).ready(function() { drawmenu(6); });

this.call不是一个函数

3 个答案: