0

私が星の評価システムのために取り組んできたスクリプトは、塗りつぶされた星を onClick イベントで保存し、onmouseover と onmouseout の値を null に変更するので、後でマウスを離しても混乱することはありません。下の関数を使用して onmouseover と onmouseout イベントをリセットする必要がありますが、それらの中で、rating[y]とxは、含まれているものではなくリテラルであると見なされ、パラメータが正しくないため、onmouse イベントは失敗します。このようにイベントを変更するときに変数を入れるにはどうすればよいですか?

     var ratings = new Array("happy", "clean");
  for(y = 0; y < 2; y++)
  {
   for(x = 0; x < 5; x++)
   {
    fullname =  ratings[y] + '_' + x;
    document.getElementById(fullname).onmouseover = function onmouseover() { star_rate(ratings[y], x, 1); };
    document.getElementById(fullname).onmouseout = function onmouseover() { star_rate(ratings[y], x, 2); };
   }
  }
4

2 に答える 2

1

次のように、関数呼び出しを使用して各ハンドラーの次のコンテキストを作成することでそれを行うことができます (ただし、以下を参照)。

var ratings = new Array("happy", "clean");
for(y = 0; y < 2; y++)
{
    for(x = 0; x < 5; x++)
    {
        fullname =  ratings[y] + '_' + x;
        (function(thisx, thisy) {
            document.getElementById(fullname).onmouseover = function() {
                star_rate(ratings[thisy], thisx, 1);
            };
            document.getElementById(fullname).onmouseout = function() {
                star_rate(ratings[thisy], thisx, 2);
            };
        })(x, y);
    }
}

xこれは、 andをパラメーターとして関数に渡すことで機能し、外側のループのバージョンのandyではなく、引数を使用してイベント ハンドラーを設定します。(上記のイベント ハンドラーの割り当てで関数名も削除しました。[関数宣言とは対照的に] 関数式で名前を使用すると、一部のブラウザーで問題が発生します。おそらくあなたが意図したものではありません. :-) )xyonmouseover

しかし、それは私がそれを行うことをお勧めする方法ではありません. 要素ごとに新しい関数を作成します。代わりに、要素自体に必要な情報を属性として保存し、これらすべてに共通の関数を使用するでしょう。それが HTML5 のdata-プレフィックスの目的です (技術的には有効ではありませんが、現在でも機能しています)。このような漠然としたもの：

var ratings = new Array("happy", "clean");
var element;
for(y = 0; y < 2; y++)
{
    for(x = 0; x < 5; x++)
    {
        fullname =  ratings[y] + '_' + x;
        element = document.getElementById(fullname);
        element.setAttribute('data-star-x', x);
        element.setAttribute('data-star-y', y);
        element.onmouseover = handleMouseOver;
        element.onmouseout = handleMouseOut;
    }
}

function handleMouseOver() {
    star_rate(this.getAttribute('data-star-y'), this.getAttribute('data-star-x'), 1);
}
function handleMouseOut() {
    star_rate(this.getAttribute('data-star-y'), this.getAttribute('data-star-x'), 2);
}

要素からデータを取得しているため、イベント バブリング (マウスオーバーとマウスアウト バブルのため) を使用して、各要素ではなくコンテナー全体にイベントをフックすることもできます。(これは「イベント委任」と呼ばれることもあります。)

于 2010-09-10T14:01:02.860 に答える
0

あなたの質問はちょっと書き方が悪いので、あなたが何と戦っているのか正確にはわかりません。しかし、おそらくあなたの問題は、 onmouseover 呼び出し内から x と y が見えないことだと思います。これはいくつかの方法で解決できますが、ほとんどの場合、x と y を要素にアタッチして、関数内から取得できるようにします。これを行う 1 つの方法は次のとおりです。

var ratings = new Array("happy", "clean");
for(y = 0; y < 2; y++) 
{
    for(x = 0; x < 5; x++) 
    {
        fullname =  ratings[y] + '_' + x;

        var ele=document.getElementById(fullname);
        ele.setAttribute("data-ratings",y+","+x);

        ele.onmouseover = function onmouseover() 
        { 
            var split=this.getAttribute("data-ratings","").split(",");
            var y=split[0];
            var x=split[1];
            star_rate(ratings[y], x, 1); 
        };
        ele.onmouseout = function onmouseover() 
        { 
            var split=this.getAttribute("data-ratings","").split(",");
            var y=split[0];
            var x=split[1];        
            star_rate(ratings[y], x, 2); 
        };
    }
}
于 2010-09-10T14:03:49.163 に答える