1

現在、自分の Web サイト用のカスタム ツールチップを開発しています。これは重いので、各ページにタイトル付きの約 300 の要素があります。そして、このコードでうまく機能しています：

var title="";
$( document ).delegate( "[title]", "mouseover", function ( event ) {
    title = $( this ).attr( "title" );
    $( "#tooltip-div" ).delay( 250 ).animate( { top: newTop, opacity: 1 }, 'fast' );
 } );

しかし、私が直面している問題は次のとおりです。残念ながら、ページには title 属性を持つが空の要素がたくさんあります。例えば：

<input type="image" id="clearBtn" title="" src="../../Images/unsearch.png" onclick="clearFilter();">

この要素では、カスタム ツールチップが空の値で表示されます。だから、「タイトル」属性を持ち、その属性が空ではない要素を選択する方法があるかどうか疑問に思っていました。

したがって、上記のような要素を除外したいと思います。イベントハンドラー内のタイトル属性の長さを確認する以外に、JQueryセレクターを使用して直接イベントを目的の要素にのみバインドする方法はありますか?

4

2 に答える 2

4

とを必要とする可能な解決策は次のとおり[title]です[title!='']。

var title="";
$( document ).delegate("[title][title!='']", "mouseover", function ( event ) {
    title = $( this ).attr( "title" );
    $( "#tooltip-div" ).delay( 250 ).animate( { top: newTop, opacity: 1 }, 'fast' );
});
于 2012-12-03T04:32:28.037 に答える
1

以前の解決策 ( CSS 3のuse :not selector に似ています) は有効ですが、次のケースは考慮されていません ( jsfiddle の例を参照):

<a href="#" title=' '>anchor 1</a>
<span title='  '>anchor 2</span>

したがって、タイトルの値を徹底的に調べたい場合は、length と trim を使用できますが、jquery の各メソッドを使用できます。

$('[title]').each(function() {
  var title = $(this).attr('title').trim();
  if (title =! '') {
    $(this).on("mouseover", function(event) {
      title = $( this ).attr( "title" );
      $("#tooltip-div").delay( 250 ).animate( { top: newTop, opacity: 1 }, 'fast' );
    })
  }

});

また、jQuery 1.7 以降、delegate メソッドは .on() メソッドに取って代わられたことに注意してください。

于 2012-12-03T05:06:05.327 に答える