jQuery——将title属性用作悬停的文本，但只在同一父类中使用。

Need some help coming up with this jQuery, at one point I almost had it working except the title was placed as text in every  on the page not just within the article, but have been unable to even get back to that point.

需要一些帮助来完成这个jQuery，我几乎让它工作了，除了标题被放置在页面上的每一个

，而不仅仅是在文章中，甚至无法回到那个点。

When hovering over .category-icons a I want to use the title attribute of .category-icons a as text for  within the same parent article.

当鼠标悬停在.category-图标a时，我想使用.category-图标a的标题属性，作为

在同一父文章中的文本。

<article class="post-1">
  <div class="category-flags">
    <p class="category-flag-text"></p>
  </div>

  <div class="category-icons">
    <a href="http:/www..." title="Category One">
      <img src="http:/www..." alt="Category One" title="Category One">
    </a>
    <a href="http:/www..." title="Category Two">
      <img src="http:/www..." alt="Category Two" title="Category Two">
    </a>
  </div>
</article>

<article class="post-2">
  <div class="category-flags">
    <p class="category-flag-text"></p>
  </div>

  <div class="category-icons">
    <a href="http:/www..." title="Category One">
      <img src="http:/www..." alt="Category One" title="Category One">
    </a>
    <a href="http:/www..." title="Category Two">
      <img src="http:/www..." alt="Category Two" title="Category Two">
    </a>
  </div>
</article>

2 个解决方案

#1

Fairly straightforward. Just use $(this).closest('article') to locate the closest article ancestor. Then, you can find the  you want.

相当简单。使用$(this).最近的('article')来定位最近的文章祖先。然后，您可以找到您想要的

。

$(".category-icons a").on('mouseover', function () {
    $(this).closest('article').find('.category-flag-text')
        .text($(this).attr('title'));
}).on('mouseout', function () {
    $(this).closest('article').find('.category-flag-text').text('');
});

http://jsfiddle.net/ExplosionPIlls/bnB5h/

#2

You could use .closest() like this:

你可以使用。最近的()像这样:

$(function(){
  $('.category-icons a').hover(function(){
    $(this).closest('article').find('p.category-flag-text').text($(this).prop('title'));
  }, function(){
    $(this).closest('article').find('p.category-flag-text').html('');
  });
});

Demo: http://jsbin.com/akoton/1/edit

演示:http://jsbin.com/akoton/1/edit

#1