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

【问题标题】：Is there a way to number my javascript functions in a loop?有没有办法在循环中对我的 javascript 函数进行编号？
【发布时间】：2013-09-17 04:14:05
【问题描述】：

仍然是 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 中建议的那样通过在循环中对函数进行编号来使函数紧凑吗？

【问题讨论】：

不确定我是否理解。澄清一下，当您 mouseover 特定用户添加的图像时，您希望同一用户添加的所有图像都获得绿色轮廓？
顺便说一句，您应该通过 CSS 而不是 JS 来执行此操作。您可以在 CSS 中设置 :hover 伪类以使图像在悬停时具有边框。这是假设您想要做的只是用边框突出显示。
感谢 showdev 的回复.....实际上，鼠标悬停在表格单元格内的图像上，我希望整个 'unit'= [（图像 + 用户名 + 个人陈述）在表格单元格内]它周围有一个绿色轮廓，仅适用于该表格单元格。很抱歉有歧义
仅供参考，您可以简单地结束您的 PHP 脚本：?>，输出一些 HTML（或在这种情况下为 <script> 标签），而不是创建巨大的 echo 语句，当您需要 PHP再次，您只需开始：<?php。
好的，感谢您的澄清。我同意其他人的观点，我会尝试为此使用 CSS。像这样：jsfiddle.net/4VX4D 但你的上下文可能更复杂。是否可以看到您的 HTML 甚至 jsfiddle？

标签： javascript php function for-loop outline

【解决方案1】：

（假设应用绿色边框是一个实验，所以你不想使用 CSS。否则，CSS 是要走的路）

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

您有一个由表格单元格 (TD) 内的图像和文本组成的单元
当您将鼠标悬停在图像上时，您希望 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)" >

这里是它的一个小提琴 - 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/

【讨论】：