2009-06-28 7 views
3

私はjQueryに小さなシステムを実装して自分自身を紹介しています。ここでは、onmouseoverによって要素の近くにテキストの吹き出しが表示されます。jQueryでの批判使用

<head runat="server"> 
    <script type="text/javascript" src="Scripts/jquery-1.3.2.js"></script> 
    <script type="text/javascript"> 
     $('document').ready(function() { 
      $('span.balloon').each(function() { 
       this.style.display = "none";   
      });  

      $('span.ballooned').mouseover(function(event){ 
       if (event.currentTarget.attributes["balloonid"]) { 
        var blnArr = $("#" + event.currentTarget.attributes["balloonid"].value); 
        if (blnArr.length > 0) { 
         blnArr[blnArr.length - 1].style.display = "inline";      
        }; 
       }; 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div> 
     This is some text where I describe a <span class="ballooned" balloonId="bln-1">text field</span> and want to attach extra info to that phrase. 
    </div> 
    <span class="balloon" id="bln-1">nvarchar(8)</span> 
</body> 
+0

@ 01、ありがとうございました。私は今までこれらのタグについて知らなかった。 – ProfK

答えて

11
$(function() { 
    $("span.balloon").hide(); 

    $("span.ballooned[balloonid]").mouseover(
     function() { 
      var balloonid = "#" + $(this).attr("balloonid"); 
      $(balloonid).css("display", "inline"); 
     }); 
}); 
+0

+1 [balloonid]の言及はセレクタのヒントのために大量に使われていないセレクタシンタックスの一部で、 –

+0

+2というセレクタのヒントと私の$(this)の表示です。 – ProfK

+0

[balloonid]も+1 –

1
 
$('span.ballooned').mouseover(function(e){ 
    if ($(this).attr("balloonid")) 
    $("#" + $(this).attr("balloonid")).css('display','inline'); 
}); 
2
$('document').ready(function() { 

    $('span.balloon').hide(); 

    $('span.ballooned').mouseover(function(event){ 
     if (this.balloonid) { 
      var blnArr = $("#" + this.balloonid); 
      if (blnArr[0]) { 
       $(blnArr[blnArr.length - 1]).css('display', 'inline');    
      }; 
     } 
    }); 

}); 

は...わからないことがうまくいく場合:私は改善し、何のコードが間違っていることができる場所私はここであまりにも多くのバニラJSを使用していますように私は感じるので、提案してください...私は不思議に思っています:なぜあなたはexpandoプロパティ( "baloonid")を使用していますか?これはちょっと目立ちません。

+0

このバルーンには注意してください。expandoのようなものはクロスブラウザではありません。 .attr( 'baloonid')はより安全です –

+0

なぜ(blnArr.length) – redsquare

+0

なぜでしょうか?[0]は3文字を保存するためです。 – James

5

最初に、ブラウザに依存しないことが確かであれば、というバニラjsを使用すると何も問題はないとしましょう。 jQueryフレームワークは、すべてのjavascript構文を置き換えるものではありません。ほとんどの人は、jQueryは、1)私たちが管理していないブラウザ戦争に対処するために開発者を強制するという長年にわたる問題を解決し、2)その日の要求を満たすために定期的に必要とされる複雑なタスクを単純化すること。

つまり、私はjQuery's CSS関数を使用してプロパティを設定することをお勧めします。

+0

私はプレーンjを使用することに対してすべて反対ではありませんが、私はむしろjQueryを完全に使用することを学び、いくつかの新しいホイールを発明します。 – ProfK

2

jQueryの美しさの一部は、何かしたいプラグインです。その精神で、私のお気に入りのプラグインの1つをチェックアウトする必要があります:jQuery BeautyTips。それは非常にうまく風船を行います。

+0

同様の機能を持つ別のjQueryプラグインはclueTipです http://plugins.learningjquery.com/cluetip/ –

関連する問題