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 <p class="category-flag-text"></p> 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 <p class="category-flag-text"></p> 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


1

Fairly straightforward. Just use $(this).closest('article') to locate the closest article ancestor. Then, you can find the <p> 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/

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

更多相关文章

  1. 如何更改Gmaps.js在Google地图中使用的图标?
  2. 【HTML&CSS】【7】网址栏左侧出现的图标Icon
  3. “/图标。ico " vs
  4. 图标旋转但返回上一个位置
  5. jQuery更改活动类图标的状态
  6. 如何配置使用CAS的PHP客户端--迁移文章(blogspot爱你不容易)
  7. php下删除一篇文章生成的多个静态页面
  8. 《PHP高级知识进阶》系列技术文章整理收藏
  9. mysql 第二十四篇文章~相关分片功能的测试四

随机推荐

  1. 面试官,我会写二分查找法!对,没有 bug 的那
  2. 来安装一个酷炫的 VS Code 主题更好的刷
  3. 两分钟看完一道投机取巧的算法题
  4. 【五分钟】看完一道有装逼解法的算法题
  5. 三分钟看完两道套数学公式的算法题
  6. 浅谈什么是分治算法
  7. 如何有效的写算法题
  8. 用python爬取前程无忧网,看看我们是否真的
  9. 有点难度,几道和「滑动窗口」有关的算法面
  10. 一道简单的数组题目:删除排序数组中的重复