0

次のコードは、Opera では正常に動作しますが、IE 8 では動作しません。

ページに dtest2 div 要素があります。テスト目的で、画像のマウスオーバーおよびマウスアウト イベントで div 要素の内容を変更しようとしています。

html:

  <a ><img  title='' class='imgclass' src='images/image1.jpg'  onmouseover="f1('1')"  onmouseout="f2('1');"    ></a>

Jクエリ：

function f1(id)
{   

 $('#dtest2').html("Test "+id);
}
    function f2(id)
{   
        $('#dtest2').html("Test 2 "+id);
}

Opera では正常に動作します。IEでは、1回または数回動作し、その後動作を停止します。IE の特定のコマンドはありますか?

これらの画像はデータベースから取得されています。id はデータベースからの一意の番号です。

ありがとう

4

1 に答える 1

1

ここでイディオムを少し混ぜています。それでも動作するはずですが、HTML からコードを分離することを含む "jQuery 方式" を使用することで、おそらくより良い結果が得られる (そして確実にコードがきれいになる) でしょう。

したがって、最初に HTML:

<a>
    <img title='' class='imgclass' src='images/image1.jpg'>
</a>

onMouseOverとonMouseOut属性を除いて、あなたが持っていたものと同じです。

ここで、できればロードに使用する別のファイルにある jQuery を使用<script src="url.js" type="text/javascript"></script>します。

$('img.imgclass').hover(function() {
    $('#dtest2').html('Test');
}, function() {
    $('#dtest2').html('Test2');
});

jQuery の主な利点の 1 つは、すべてのブラウザーの非互換性を滑らかにするように設計されているため、すべてのブラウザーに対して 1 つのコードだけで済むようになっていることです。

id関数に渡したいについては、少しトリッキーです。その数字はどこから来て、それは何を意味するのでしょうか? それはそれを処理する方法に影響します。

他に何もなければ、次のdata-ように HTML5 属性を使用して HTML に含めることができます。

<a>
    <img title='' class='imgclass' src='images/image1.jpg' data-hover-id="1">
</a>

次に、jQuery に次の変更を加えて取得できます。

$('img.imgclass').hover(function() {
    var id = $(this).data('hover-id');
    $('#dtest2').html('Test ' + id);
}, function() {
    var id = $(this).data('hover-id');
    $('#dtest2').html('Test2 ' + id);
});

編集された質問の編集: それらはデータベースからの一意の ID であるためid、img. ただし、純粋に数値の は使用しないでくださいid。iしたがって、データベースから ID を取得するために使用するものは何でも、おそらくまたはだけで何かを先頭に追加する必要がありますimg。

次に、HTMLは次のようになります

<img id="i1" title="" src="images/image1.jpg">

そして、jQuery は$(this).attr('id')の代わりにアクセスできます$(this).data('hover-id')。

于 2012-08-02T23:09:29.703 に答える