1

div内のアイコンのマウスオーバーでdivのコンテンツをロードしたい。さらに、マウスオーバーは 1 回だけ起動し、できればコンテンツのロード後にアイコンが消えるようにする必要があります。

de div に読み込まれるコンテンツは、ソーシャル メディア ボタンを含む外部ファイルになります。ご不明な点がある場合は、速度が低下するため、ページの残りの部分をロードしたくありません。また、一部の訪問者は、インターネットの動きを追跡する FB や G+ などのサイトに慣れていない可能性があります。

それで、私はいくつかのコードを集めて、少しコピーして貼り付けました。これが私が思いついたものです：

<div id="social_media">

<img src="icon.png" onmouseover="javascript:$('#social_media').load('external_file.php'); this.onmouseover=null;" alt="Show Social Media Buttons!" />

</div>

問題は、それは完全に正常に動作するということです:)しかし、それは3つの異なるソースから取得して貼り付けたコードであるため、私の質問はそれが何か良いかどうかです? たとえば、マウスオーバーでアイコンを削除する方法を見つけようとしたことは一度もありませんでした:)

私は Javascript/jQuery のコーディングの経験がほとんどないので、それについてどう思うか教えてください。

アムステルダムからの感謝と挨拶！

4

3 に答える 3

2

インライン コードの試行を避ける

<div id="social_media">

<img src="icon.png"  alt="Show Social Media Buttons!" />

</div>

mouseenterイベントハンドラをimg 

$(function(){// short cut of $(document).ready(); read more on google
    $("#social_media>img").bind({
        mouseenter:function(e){
         $('#social_media').load('external_file.php');
        }
    });
});

PSセレクターは最適化されておらず、このコードの結果は単にアイデアを提供するためのものではありません

デモ

于 2012-05-27T20:43:58.413 に答える
1

注意すべき点がいくつかあります。

  • HTML でインライン JavaScript コードを使用することは絶対に避けるべきです。これはまったくクリーンではありません。可能な外部 JavaScript ファイルに移動するか、少なくとも別の<script>タグに移動します。メンテナンスがより簡単になります。

  • このメソッドを使用してイベントを 1 回だけ発生させるのは奇妙に思えます。そのために正確に作成されたjQueryoneメソッドを使用する必要があります。

  • loadメソッドがアイコンがあるdivのコンテンツを置き換える ため、アイコンは消えます。

たとえば、IMO の場合、コードは次のようになります。

 $('#social_media').one('mouseover', function(){
   $(this).load('external_file.php');
 });
于 2012-05-27T20:44:27.487 に答える
1

あなたの本当の質問に対する答えは、「コードはちょっと中途半端です」です。アイコンが消えたのは、電話をかけたときにアイコンloadを交換したためです。内部的には、ドキュメントは「ドキュメント オブジェクト モデル」の DOM と呼ばれるドキュメントの一部のツリーです。このツリーは実際にはモデルの表現であり、モデル自体ではないため、用語を乱用しています。

そのツリーにはあなたdivのノードがあり、アイコンのノードが含まれていますimg。を実行するload()と、そのノードはロードしたものに置き換えられます。

@john が言うように、そのようなコードをインラインに配置することは望ましくありません。後で何をしているのかを把握したい場合、見つけるのが難しい場合があるからです。

于 2012-05-27T20:49:33.490 に答える