javascript - 有没有办法在循环中对我的 javascript 函数进行编号？

Question

仍然是 php 和 javascript 的初学者，但这个论坛帮了很多...谢谢。

我有一个相配的侧面照片库(每张照片 + 用户名 + 个人陈述 = 一个单元并包含在一个表格单元格中....信息从 SQL 数据库中获取为 $sql1和下面的 $sql2 通过“while”循环；我在图库中设置了限制 = 50 对照片)...图库显示完美。但是，我认为我可以通过在用户鼠标悬停在图像 上的单元周围放置一个绿色轮廓来使其更具用户交互性。我的测试用例(使用绿色轮廓)在脚本中手动设置所有变量时有效，如下所示(此处显示了脚本中 GreenBorder 和 NoBorder 的两个函数):

<?php $i=1;


    WHILE (($row = mysql_fetch_assoc(**$sql1**)) && ($drow =   
    mysql_fetch_assoc(**$sql2**))) {

    echo "<script>

          var Outline = new Array();
          for (j=1; j<50; j++) {
          Outline[j] = j;
                               }  


          function GreenBorder1() { 
          document.getElementById('X'+Outline[1]).style.outline = '#00CC00 solid  
          thick';            
          }
          function NoBorder1() { 
          document.getElementById('X'+Outline[1]).style.outline = 'none';              
          }
          function GreenBorder2() { 
          document.getElementById('X'+Outline[2]).style.outline = '#00CC00 solid   
          thick';
          }
          function NoBorder2() { 
          document.getElementById('X'+Outline[2]).style.outline = 'none';
          }

          </script>";

    //Lots of code 

    echo "<td id=\"X".$i."\">";

    //Lots of Code 

    echo "<img src=\"images/**image**.png\" onmouseover=\"GreenBorder".$i."(this)\"  
    onmouseout=\"NoBorder".$i."(this)\">";
    echo "</td>";

    //Lots of Code 


    $i++;
    } // End while
 ?>

很明显，我不想编写 50 个 GreenBorder(number)() 和 NoBorder(number)() 类型的函数(实际上总共有 200 个函数，因为有 50 对带有 GreenBorder 或 NoBorder 的照片)。我正在寻找一些方法来使用我的脚本做一些事情，如下所示(我的想法是每次运行“for”循环都会为 GreenBorder 和 NoBorder 分配一个不同的函数编号 j，这将匹配到与函数编号 j 匹配的编号 j 的特定 ID):

          echo "<script> //I will name this *script2*

          var Outline = new Array();
          for (**j**=1; **j**<50; **j**++) {
          Outline[**j**] = **j**;

          function GreenBorder**j**() { 
          document.getElementById('X'+Outline[**j**]).style.outline = '#00CC00 solid  
          thick';
          }
          function NoBorder**j**()   { 
          document.getElementById('X'+Outline[**j**]).style.outline = 'none';
          }

          }
          </script>";

我尝试了多种方法来做到这一点(包括将我的函数名称写为 GreenBorder.j()、GreenBorder+j() 和 GreenBorder'j'() 以及其他方法，包括使用括号)并且研究过；我在网站上找到了这个链接:

Javascript Array of Functions

但是这个链接的方法似乎都涉及实际编写 200 个函数(最终，如果有必要，我会这样做；我的原始脚本应该也可以)。有没有办法通过在循环中对函数编号来使函数像我在 script2 中建议的那样紧凑？

Answer 1

(假设应用绿色边框是一个实验，所以您不想使用 CSS。否则，CSS 是解决问题的方法)

据我了解，这就是你想要做的。

1. 你有一个单元，它由表格单元格 (TD) 中的图像和文本组成
2. 当您将鼠标悬停在图像上时，您希望 TD 具有轮廓

您只需编写一组函数即可完成此操作。

function GreenBorder(el) {
    //get the parent of whatever node is passed in
    el.parentNode.style.outline = '#00CC00 solid thick';
}

function NoBorder(el) {
    el.parentNode.style.outline = 'none';
}

你的图片标记应该是这样的

<img src="path/to/image" onmouseover="GreenBorder(this)"  onmouseout="NoBorder(this)" >

这是它的一个 fiddle - http://jsfiddle.net/5Y6EK/

简单地说，您将当前悬停的图像传递给您的函数，该函数通过添加和删除轮廓来修改父节点。这假设您的图像直接位于 TD 元素下方。

您可能想通过查看不显眼的 javascript 来跟进这个实验。

这里有一些资源

http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

http://www.ibm.com/developerworks/library/wa-aj-unobtrusive/

IBM 文章以jQuery为例，这是一个值得一看的库- http://jquery.com/