不明白“+ objID +”

时间:2013-09-15 09:35:10

标签: javascript

我是javascript的新手,所以我无法理解" + objID +"的含义然后来了。

timer[objID]=setTimeout(m,150);

这是所有代码。如果需要,您可以在编辑器中复制/粘贴它以查看结果。谢谢!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <title>TEXT</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">      **/*the css */**
            html, body { margin: 0px; padding: 0px; }
            h1 { margin-top: 30px }
            #menu a, .subMenu a {
                display: block;
                font-family: Arial, sans-serif;
                font-size: 10pt;
                font-weight: bold;
                text-decoration: none;
                color: black;
                border: 1px solid #ddd;                     
            }
            #menu a:hover, #menu a:active, .subMenu a:hover, .subMenu a:active {
                background-color: #eee;
                border-color: #999;
            }       
            #menu {
                background-color: #ddd;
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
            }
            #menu a {
                width: 100px;
                float: left;
                margin-left: 5px;
                padding: 2px;
            }
            .subMenu {
                width: 150px;
                top: 26px;
                background-color: #ddd;
                border: 1px solid black;
                position: absolute;
                visibility: hidden;
            }
            .subMenu a {
                display: block;
                width: 90%;
                margin: 0px;
                padding: 4px;
            }
            #subMenu1 { left: 5px }
            #subMenu2 { left: 125px }
            #subMenu3 { left: 230px }

        </style> **/*the css ends*/**

                   <script type="text/javascript">
            var timer= new Object(); 

            **/* this func. sets the visibility
            of hidden menus which appear by
            "onmouseover"*/**

            function setVisibility(objID, visible){ 
            var obj=document.getElementById(objID);
            if(obj.style.visibility=visible){
                obj.style.visibility="visible";
            }
            else{obj.style.visibility="";}

            }

            **/* this one calls the func. above
            if needed to show the hidden
            menu*/**

            function showMenu(objID)
            { setVisibility(objID,true);
                clearTimeout(timer[objID]);
            }
            **/*this one hides by onmouseout putting false boolean in func.                          
                     setVisibility "visible" parameter*/** 
            function hideMenu(objID)
            { 
                var m="setVisibility('"+objID+"',false)";
                timer[objID]=setTimeout(m,150);
            }


        </script>
    </head>

    <body>
        <h1>Text</h1>
        <div id="menu">
            <a href="#" 
                onmouseover="showMenu('subMenu1')"
                onmouseout="hideMenu('subMenu1')">Module 1</a>
            <a href="#" 
                onmouseover="showMenu('subMenu2')"
                onmouseout="hideMenu('subMenu2')">Module 2</a>
            <a href="#" 
                onmouseover="showMenu('subMenu3')"
                onmouseout="hideMenu('subMenu3')">Module 3</a>
        </div>

        <div id="subMenu1" class="subMenu"
        onmouseover="showMenu('subMenu1')"
                onmouseout="hideMenu('subMenu1')">
            <a href="../module1/statements/for-1.html">Text</a>
            <a href="../module1/statements/if-1.html">Text</a>
            <a href="../module1/statements/switch.html">Text</a>    
        </div>

        <div id="subMenu2" class="subMenu"
        onmouseover="showMenu('subMenu2')"
                onmouseout="hideMenu('subMenu2')">
            <a href="../module2/objects/build-in/array.html">Text</a>
            <a href="../module2/objects/build-in/boolean.html">Text</a>
            <a href="../module2/objects/build-in/date.html">Text</a>
            <a href="../module2/objects/build-in/global-object.html">Text</a>
            <a href="../module2/objects/build-in/math.html">Text</a>
            <a href="../module2/objects/build-in/number.html">Text</a>
        </div>
        <div id="subMenu3" class="subMenu"
        onmouseover="showMenu('subMenu3')"
                onmouseout="hideMenu('subMenu3')">
            <a href="../module3/document.html">Text</a>
            <a href="../module3/history.html">Text</a>
            <a href="../module3/location.html">Text</a>
            <a href="../module3/navigator.html">Text</a>
        </div>
    </body>
    </html>

4 个答案:

答案 0 :(得分:0)

这是在很短的时间间隔之后隐藏菜单的一种非常糟糕的方式。

您最好将其更改为:

function hideMenu(objID)
{ 
    timer[objID] = window.setTimeout(function() {
        setVisibility(objID, false);
    }, 150);
}

setTimeout方法也可以接受原始字符串,然后评估并在运行中执行。 JavaScript中的评估(也由eval()方法使用)不是一种好的做法,如果可能的话,最好避免使用。在这种情况下,可以通过将函数传递给setTimeout来轻松避免。

更深入地研究语法,让我们来看看这一行:

var m="setVisibility('"+objID+"',false)";

这是创建一个字符串并在其中添加一个名为objID的变量的值,用单引号将其包装起来,以便它作为字符串传递。例如,如果该变量的值为T250,则结果字符串为:

setVisibility('T250',false)

答案 1 :(得分:0)

我会解释你这个功能:

function hideMenu(objID)
{ 
     var m="setVisibility('"+objID+"',false)";
     timer[objID]=setTimeout(m,150);
 }

首先,变量m设置为字符串。此字符串包含在"中。但是您需要将变量objID添加到字符串中。因此,字符串以"关闭,加号(+)用于连接变量objID。 (参数hideMenu)。然后这个字符串再次连接到另一个字符串。

这意味着如果你打电话

hideMenu( 10 ) 

变量m是:setVisibility('objID的内容,在本例中为10和',false)

setVisibility('10',false)

答案 2 :(得分:0)

“ setVisibility ( ' ” + objID +“ ' , false ) ”

是三个元素的串联。

“ setVisibility ( ' ” 
objID 
“ ' , false ) ”

第一个和最后一个是字符串,objID在此上下文中转换为字符串。

因此,如果objID为'14',则得到值(字符串)

“ setVisibility ( ' 14 ' , false ) ”

已分配给您的变量 m

答案 3 :(得分:0)

objID似乎是一个变量,它等于key的{​​{1}},而javascript中引用object属性的语法之一是

object

使用此方法时,您可以输入带引号的objectName[keyName] (例如string)或变量名称,使用其他方法

"myKey"

你只能输入一个没有引号的字符串。

所以objectName.keyName 意味着有一个名为timer[objID]=的{​​{1}},其中添加了a属性,并且无论object的当前值是什么,都会调用它是

在这种特定情况下(timer),它是一个要运行的定时函数,稍后可以objID取消 - 提供timer[objID]=setTimeout(m,150);仍具有相同的值。