javascript函数如何不仅仅控制特定元素

我总不能在该网页中把javascript函数重复100次，每次只改其中的lay1为lay2,lay3...吧。

解决方案 »

  1.   

    用event.srcElement来捕捉当前的div
    <div id="layer1" onclick="doit()">点我</div>
    <div id="layer2" onclick="doit()">点我</div>
    <script>
    function doit(){
    alert(event.srcElement.id);
    }
    </script>
      

  2.   

    donghid大虾的办法很好,但我愚笨,能够详细一点,把代码怎么改?
      

  3.   

    如果你是有很多div,而每个div中都包含一个button的话,可以这样写:
    把函数中的layer1改为event.srcElement.parentElement,即:<script language="JavaScript1.2">
    <!-- Script begins here by POPOEVER
    function alphaIt() {
    if (event.srcElement.parentElement.filters.Alpha.Opacity != 0 ){
    event.srcElement.parentElement.filters.Alpha.Opacity -= 10;
    setTimeout("alphaIt()",10); 
    }
    else {
    setTimeout("clearIt()",2000);
    }
    }
    function clearIt() {
    if (event.srcElement.parentElement.filters.Alpha.Opacity < 100 ){
    event.srcElement.parentElement.filters.Alpha.Opacity += 10;
    setTimeout("clearIt()",10); 
    }
    else {
    }
    }
    //-- End of script -->
    </script>
      

  4.   

    donghid大虾,感谢您这么热心.不管成不成,我一定给分.我实验了上边代码,可是结果不正确.出现错误"event.srcElement.parentElement.filters.Alpha.Opacity 为空或不是对象"请看,原始代码1.htm可以用,代码如下:<html><head>
    <style type="text/css">
    <!--
    body,td { font-family: "Arial"; font-size: 12px; color: #336600}
    div { filter: Alpha(Opacity=100)}
    input { border: 1px solid #339900;color: #339900; background-color: #336600}
    -->
    </style>
    <script language="JavaScript1.2">
    <!--Script begins here by POPOEVER
    function alphaIt() {
    if (layer1.filters.Alpha.Opacity != 0 ){
    layer1.filters.Alpha.Opacity -= 10;
    setTimeout("alphaIt()",10); 
    }
    else {
    setTimeout("clearIt()",2000);
    }
    }
    function clearIt() {
    if (layer1.filters.Alpha.Opacity < 100 ){
    layer1.filters.Alpha.Opacity += 10;
    setTimeout("clearIt()",10); 
    }
    else {
    }
    }
    //-- End of script -->
    </script>
    </head>
    <body>
    <div id="layer1" style="position:absolute; width: 371px; height: 200px; z-index: 1; background-color: #339900; layer-background-color: #339900; border: 1px solid #ffffff; left: 374px; top: 66px;"> 
    <table width="102%" height="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td background="../../images/others/bg_pic.jpg"><br>
    <br>
    <br> <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <input type="button" name="goFade" value="透明变幻" onclick="alphaIt()" onmouseover="this.className='inputover'" onmouseout="this.className=''" onFocus="if(this.blur)this.blur()">
    </td>
    </tr>
    </table>
    </div> 
    </body>
    </html>
    但是,如果把javascript函数中的layer1改为event.srcElement.parentElement,出现错误"event.srcElement.parentElement.filters.Alpha.Opacity 为空或不是对象"
    <html><head>
    <style type="text/css">
    <!--
    body,td { font-family: "Arial"; font-size: 12px; color: #336600}
    div { filter: Alpha(Opacity=100)}
    input { border: 1px solid #339900;color: #339900; background-color: #336600}
    -->
    </style>
    <script language="JavaScript1.2">
    <!-- Script begins here by POPOEVER
    function alphaIt() {
    if (event.srcElement.parentElement.filters.Alpha.Opacity != 0 ){
    event.srcElement.parentElement.filters.Alpha.Opacity -= 10;
    setTimeout("alphaIt()",10); 
    }
    else {
    setTimeout("clearIt()",2000);
    }
    }
    function clearIt() {
    if (event.srcElement.parentElement.filters.Alpha.Opacity < 100 ){
    event.srcElement.parentElement.filters.Alpha.Opacity += 10;
    setTimeout("clearIt()",10); 
    }
    else {
    }
    }
    //-- End of script -->
    </script></head>
    <body>
    <div id="layer1" style="position:absolute; width: 371px; height: 200px; z-index: 1; background-color: #339900; layer-background-color: #339900; border: 1px solid #ffffff; left: 374px; top: 66px;"> 
    <table width="102%" height="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td background="../../images/others/bg_pic.jpg"><br>
    <br>
    <br> <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <input type="button" name="goFade" value="透明变幻" onclick="alphaIt()" onmouseover="this.className='inputover'" onmouseout="this.className=''" onFocus="if(this.blur)this.blur()">
    </td>
    </tr>
    </table>
    </div> 
    </body>
    </html>
      

  5.   

    你这样的话是不行的.
    event.srcElement的意思获取发生事件的元素,parentElement是当前元素的父元素.
    要是<div id="layer1"><input onclick="xx()"></div>这样,input的父元素才是div,这样用event.srcElement.parentElement才能获取到div.你以上的代码input是包含在table中的td中的,所以input的父元素是td,而不是div,所以会提示"为空或不是对象".