1

まだphpとjavascriptの初心者ですが、このフォーラムはとても役に立っています...ありがとう。

私は自分の側面の写真と一致する側面のギャラリーを持っています (各写真 + ユーザー名 + 個人的な声明 = 1 つのユニットで、表のセルに含まれています....情報は、「while」ループを介して以下の$sql1および$sql2として SQL データベースからフェッチされます; 制限を設定しました = ギャラリー内の写真のペアを 50 組に設定しました...ギャラリーは完全に表示されます。ただし、ユーザーによる画像のマウスオーバーでユニットの周りに緑色のアウトラインを配置することで、ユーザーのインタラクティブ性を高めることができると考えました。私のテスト ケース (緑色のアウトラインを使用) は、次のようにスクリプトですべての変数を手動で設定すると機能します (ここでは、スクリプトで GreenBorder と NoBorder の両方の 2 つの関数を示します)。

<?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
 ?>

明らかに、GreenBorder(number)() および NoBorder(number)() 型の 50 個の関数を記述しないことを好みます (実際には、GreenBorder または NoBorder の写真のペアが 50 個あるため、合計 200 個の関数になります)。私は、次のようなスクリプトで何かを行う方法を探していました (私の考えでは、「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 個の関数を記述する必要があるようです (1 日の終わりに、必要に応じて実行します。元のスクリプトも機能するはずです)。ループ内の関数に番号を付けることで、 script2で提案しているように関数をコンパクトにする方法はありますか?

4

1 に答える 1

2

(緑色の境界線を適用することは実験であると仮定して、CSS を使用したくないと仮定します。それ以外の場合は、CSS がここに進む方法です)

私が理解していることから、これはあなたがやりたいことです。

  1. 表のセル (TD) 内に画像とテキストで構成されるユニットがあります。
  2. 画像にカーソルを合わせると、TD にアウトラインが表示されます

これを行うために必要な関数セットは 1 つだけです。

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/

于 2013-09-12T17:12:52.647 に答える