1

このjQueryを思い付くのに助けが必要です。ある時点で、タイトルが<p class="category-flag-text"></p>記事内だけでなくページのすべてにテキストとして配置された以外は、ほとんど機能していましたが、その時点に戻ることさえできませんでした。

カーソルを合わせると、同じ親記事内のテキストとして.category-icons aのtitle属性を使用したいと思います。.category-icons a<p class="category-flag-text"></p>

<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>
4

2 に答える 2

1

次のように.closest()を使用できます。

$(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('');
  });
});

デモ: http://jsbin.com/akoton/1/edit

于 2013-02-07T03:07:11.590 に答える
1

かなり簡単です。$(this).closest('article')最も近い記事の祖先を見つけるために使用するだけです。次に、必要なものを見つけることができます<p>。

$(".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/

于 2013-02-07T03:02:42.547 に答える