0

Jqueryで次の関数を作成しました

function menuItem(x,i) {
var imgALT = $(x).text();   
$(x).mouseover(function()
{
    $(x).parent().parent().parent().children("img").attr("src", "menu/menu"+i+".jpg");
    $(x).parent().parent().parent().children("img").attr("alt", imgALT);
    $(x).parent().children("span").css("color", "#FFFFFF");
    $(x).css("color", "#CA0109");
});
};

そして、次を使用してトリガーします。

<span onmouseover="menuItem(this,'09-01')">月亮蝦餅 (2份)</span>

意図したとおりに機能しますが、最初ではなく2回目のスパンにマウスオーバーした後でのみ機能します。これはおそらく何らかの読み込みの問題だと思いますか？最初のマウスオーバーとその後のイベントで確実にトリガーするにはどうすればよいですか?

どうもありがとう！

4

2 に答える 2

3

問題は、要素の上にカーソルを置き、インラインが発生した後でのみ、jQuery を使用してイベントをバインドしていることですonmouseover。

このイベントはアプリケーションの構造にとって重要であるように見えるためonmouseover、JavaScript を次のように変更します。

function menuItem(x,i) {
    var $x = $(x);
    var imgALT = $x.text();

    $x.parent().parent().parent().children("img").attr("src", "menu/menu"+i+".jpg");
    $x.parent().parent().parent().children("img").attr("alt", imgALT);
    $x.parent().children("span").css("color", "#FFFFFF");
    $x.css("color", "#CA0109");
}

理想的には、data-属性を使用します。

HTML :

<span data-image="09-01">月亮蝦餅 (2份)</span>

JavaScript :

$(document).ready(function() {
    $('span[data-image]').mouseover(function() {
        var $this = $(this);
        var $images = $this.parent().parent().parent().children("img");

        $images.attr("src", "menu/menu" + $this.data('image') + ".jpg");
        $images.attr("alt", $this.text());

        $this.siblings("span").css("color", "#FFFFFF");
        $this.css("color", "#CA0109");
    });
});
于 2012-10-05T07:08:09.560 に答える
1

document.ready関数を使用する

$(document).ready(function(){
  $('span').mouseover(function(){});
    });
于 2012-10-05T07:16:54.457 に答える