1

目前我正在为我的网站开发一个自定义工具提示。它很重，所以它有大约 300 个元素，每页都有标题。它与这段代码配合得很好：

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

但我面临的问题是：不幸的是，页面中有很多元素具有标题属性，但为空。例如：

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

对于此元素，我的自定义工具提示显示为空值。所以我想知道是否有任何方法可以选择具有“title”属性且该属性不为空的元素。

所以我想排除上面显示的元素。有没有办法直接使用 JQuery 选择器来做到这一点，以确保我只将事件绑定到我想要的元素，除了检查事件处理程序中 title 属性的长度。

4

2 回答 2

4

这是一个可能的解决方案，需要 a[title]和 a [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

先前的解决方案（类似于使用:not 来自 CSS 3 的选择器）是有效的，但它没有考虑以下情况（参见 jsfiddle 的示例）：

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

因此，如果您想对标题值进行彻底检查，您可以使用长度和修剪，但使用 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 开始，委托方法已被 .on() 方法取代

于 2012-12-03T05:06:05.327 回答