1

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

我有一个匹配的侧面照片画廊（每张照片 + 用户名 + 个人陈述 = 一个单元并包含在一个表格单元格中....信息是通过“while”循环从 SQL 数据库中获取的$sql1和$sql2下面; 我设置了一个限制 = 画廊中的 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'循环都会将不同的函数编号j分配给 GreenBorder 和 NoBorder，这也将与编号j的特定 id 匹配 与函数编号j匹配）：

          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 函数数组

但是这个链接的方法似乎都涉及实际编写 200 个函数（归根结底，如果有必要，我会这样做；我的原始脚本也应该可以工作）。有什么方法可以通过在循环中对函数进行编号来使函数像我在script2中建议的那样紧凑？

4

1 回答 1

2

(Assuming that applying the green border is an experiment so you don't want to use CSS. Otherwise, CSS is the way to go here)

From what I understand, this is what you want to do.

  1. You have a unit which is composed of an image and text inside a table cell (TD)
  2. When you hover over the image, you want the TD to have an outline

You only need to write one set of functions to do this. 

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';
}

Your image markup should be like this 

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

Here's a fiddle of it - http://jsfiddle.net/5Y6EK/

Simply put, you pass in the currenty hovered image to your function, which modifies the parent node by adding and removing the outline. This assumes that your image is directly under the TD element.

You might want to follow up this experiment by looking at unobtrusive javascript.

Here are some resources

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

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

The IBM article uses jQuery as examples, this is a library worth looking at - http://jquery.com/

于 2013-09-12T17:12:52.647 回答