Есть ли способ присвоить функции javascript в цикле?

Question

Еще новичок в php и javascript, но этот форум помогает многим ... спасибо.

У меня есть галерея соответствует стороне моей стороны фотографий (каждое фото + имя пользователя + личного заявления = единица и содержащейся в ячейке таблицы .... информация извлекается из базы данных SQL, как SQL1 $ и $ SQL2 ниже через цикл «while», я установил предел = 50 пар фотографий в галерее) .... галерея отлично отображена. Тем не менее, я думал, что сделаю его более интерактивным для пользователя, разместив зеленый контур вокруг устройства onmouseover изображения . Мой тест (используя зеленый контур) работает при ручной установке всех переменных в скрипте следующим образом (здесь с двумя функциями как для 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, совпадающий номер функции 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 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)" > 

Вот скрипка этого - 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/