JQueryの内容をページのアンカーと置き換えるホバーの状態タイトルを置換する

Question

JQueryを使用するページアンカーのセットがあります。アンカーリンクには、アンカーが呼び出されたことを示すためのポップアップツールヒントが表示されます。

ページアンカーのh4タイトルを取得し、アンカーリンクのtitleをJQueryを使用して置き換えたいと考えています。ここで

アンカーの一つのマークアップです：

 $(document).ready(function() { 
      $('.article-anchors li a').mouseenter(function() { 
       var title = $(this).attr('title'); 
       $(this).attr('title', $("[name=" + title + "] h4").html()); 
       $(this).data('tipText', title) 
       $('<p class="tool-tip"></p>') 
        .text(title) 
        .appendTo('body') 
        .fadeIn('slow'); 
      }).mousemove(function(e) { 
       var mousex = e.pageX + -130; 
       var mousey = e.pageY + -40; 
       $('.tool-tip') 
        .css({ 
         top: mousey, 
         left: mousex 
        }) 
      }).mouseout(function() { 
       $('.tool-tip').fadeOut(); 
      }); 
      $('.to-top').click(function(e) { 
       e.preventDefault(); 
       $('html,body').animate({ 
        scrollTop: 0 
       }, 700); 
      }); 
      $('.to-bottom').click(function() { 
       $('html,body').animate({ 
        scrollTop: $(document).height() 
       }, 700); 
       return false; 
      }); 
      $('a:contains("section")').css('text-transform', 'uppercase'); 
     }); 

：

<div class="article-anchors"> 
    <ul> 
    <li class="to-top"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></li> 
    <li><a href="#section1" title="section1" class="articleS1">1</a></li> 
    <li><a href="#section2" title="section2" class="articleS2">2</a></li> 
    <li><a href="#section3" title="section3" class="articleS3">3</a></li> 
    <li><a href="#section4" title="section4" class="articleS4">4</a></li> 
    <li class="to-bottom"><i class="fa fa-chevron-circle-down" aria-hidden="true"></i></li> 
    </ul> 
</div> 

スクリプトソリューションのために：ここで

<a name="section1"> 
    <h4 id="sectiontitle1">Overview</h4> 
</a> 
<p> 
     Lorem ipsum dolor sit amet, brute ocurreret disputando vis te. 
     Has ludus splendide ex, ei mea habemus invidunt voluptatibus, 
     nihil prompta deleniti eu mea. Id has alterum appellantur 
     delicatissimi, an <a href="form.html">vix justo mentitum</a>.Est 
     cu illud nihil. Ei mei iisque accumsan reprimique. 
</p> 

はリンクページのアンカーを言ったためには、

ので、ホバーオーバー時にポップアップツールのヒントを表示する：

1. セクション1 =概要
2. セクション2 =主要構造
3. セクション3 =サポート

4. セクション4 =接触最良の方法はどのようになるか

final UI

これを達成するには？私は :containsを試しましたが、これは私に喜びをもたらしませんでした。

TIA。

これは、問題のフィドルです：fiddle link

もちろんのこと、ポップアップツールチップを駆動するjQueryのCSSに大きく依存しているとボールをプレイしたいように見えるが、あればしないことあなたは右の番号が箇条書きの上にカーソルを置く、タイトルが表示され、各セクションのタイトルを一致させる必要があり、1は2がメイン構造となり、概要になりますなど

Answer 1

$(function(){ 
 

 
    var popupTitle = $('<p class="tool-tip"></p>').appendTo($('body')).hide(); 
 

 
    // Find your links, but we could have generated your links from the client side 
 
    $('div.article-anchors ul li a[href^="#"]').each(function(){ 
 
    var ref = $(this), 
 
     anchor = ref.attr('href') || '', // Find the #anchor 
 
     pound = anchor.indexOf('#'); // Find the location of # 
 
    // Verify 
 
    if (pound >= 0 && (pound + 1) < anchor.length) { 
 
     // Remove the # sign 
 
     anchor = anchor.substring(pound + 1); 
 
     // Find and set the title from the first h4 tag 
 
     ref.attr('floatTitle', $('a[name="'+anchor+'"] h4:first').text()); 
 
     ref.attr('title', ''); 
 
    } 
 
    }).mouseenter(function() { 
 
     var title = $(this).attr('floatTitle'); 
 
     popupTitle.stop().hide() 
 
      .text(title) 
 
      .fadeIn('slow'); 
 
    }).mousemove(function(e) { 
 
     var mousex = e.pageX + -130; 
 
     var mousey = e.pageY + -40; 
 
     popupTitle 
 
      .css({ 
 
       top: mousey, 
 
       left: mousex 
 
      }) 
 
    }).mouseout(function() { 
 
     popupTitle.fadeOut(); 
 
    }); 
 

 
    $('.to-top').click(function(e) { 
 
     e.preventDefault(); 
 
     $('html,body').animate({ 
 
      scrollTop: 0 
 
     }, 700); 
 
    }); 
 
    $('.to-bottom').click(function() { 
 
     $('html,body').animate({ 
 
      scrollTop: $(document).height() 
 
     }, 700); 
 
     return false; 
 
    }); 
 
    $('a:contains("section")').css('text-transform', 'uppercase'); 
 

 
});

/*article anchors*/ 
 

 
.article-anchors { 
 
    display: block; 
 
    position: fixed; 
 
    right: 20px; 
 
    top: 50%; 
 
} 
 

 
.article-anchors ul { 
 
    list-style: none; 
 
} 
 

 
.article-anchors ul li:first-child i, 
 
.article-anchors ul li:last-child i { 
 
    padding: 0; 
 
    text-align: center; 
 
    display: block; 
 
    font-size: 39px; 
 
    width: 46px; 
 
    height: 46px; 
 
    color: #0485c2; 
 
    margin: 0 0 20px 0; 
 
} 
 

 
.article-anchors ul li { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.article-anchors ul li a { 
 
    position: relative; 
 
    right: 0px; 
 
    z-index: 9999; 
 
    display: block; 
 
    width: 36px; 
 
    margin: 0 0 20px 0; 
 
    background-color: #E9F2F7; 
 
    border: 3px solid #0485c2; 
 
    color: #0485c2; 
 
    border-radius: 100px; 
 
    text-align: center; 
 
    padding: 8px 2px; 
 
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); 
 
} 
 

 
.tool-tip { 
 
    display: none; 
 
    position: absolute; 
 
    margin-bottom: 20px; 
 
    width: auto; 
 
    padding: 6px 8px; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    line-height: 24px; 
 
    color: #9EC483; 
 
    background-color: #CFE5BF; 
 
    border: 1px solid #9EC483; 
 
    border-radius: 3px; 
 
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="article-anchors"> 
 
    <ul> 
 
    <li class="to-top"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></li> 
 
    <li><a href="#section1" title="section1" class="articleS1">1</a></li> 
 
    <li><a href="#section2" title="section2" class="articleS2">2</a></li> 
 
    <li><a href="#section3" title="section3" class="articleS3">3</a></li> 
 
    <li><a href="#section4" title="section4" class="articleS4">4</a></li> 
 
    <li class="to-bottom"><i class="fa fa-chevron-circle-down" aria-hidden="true"></i></li> 
 
    </ul> 
 
</div> 
 

 
<a name="section1"><h4 id="sectiontitle1">Overview 1</h4></a> 
 
<p> 
 
    Lorem ipsum dolor sit amet, brute ocurreret disputando vis te. 
 
    Has ludus splendide ex, ei mea habemus invidunt voluptatibus, 
 
    nihil prompta deleniti eu mea. Id has alterum appellantur 
 
    delicatissimi, an <a href="form.html">vix justo mentitum</a>.Est 
 
    cu illud nihil. Ei mei iisque accumsan reprimique. 
 
</p> 
 
<a name="section2"><h4 id="sectiontitle2">Overview 2</h4></a> 
 
<p> 
 
    Lorem ipsum dolor sit amet, brute ocurreret disputando vis te. 
 
    Has ludus splendide ex, ei mea habemus invidunt voluptatibus, 
 
    nihil prompta deleniti eu mea. Id has alterum appellantur 
 
    delicatissimi, an <a href="form.html">vix justo mentitum</a>.Est 
 
    cu illud nihil. Ei mei iisque accumsan reprimique. 
 
</p> 
 
<a name="section3"><h4 id="sectiontitle3">Overview 3</h4></a> 
 
<p> 
 
    Lorem ipsum dolor sit amet, brute ocurreret disputando vis te. 
 
    Has ludus splendide ex, ei mea habemus invidunt voluptatibus, 
 
    nihil prompta deleniti eu mea. Id has alterum appellantur 
 
    delicatissimi, an <a href="form.html">vix justo mentitum</a>.Est 
 
    cu illud nihil. Ei mei iisque accumsan reprimique. 
 
</p> 
 
<a name="section4"><h4 id="sectiontitle4">Overview 4</h4></a> 
 
<p> 
 
    Lorem ipsum dolor sit amet, brute ocurreret disputando vis te. 
 
    Has ludus splendide ex, ei mea habemus invidunt voluptatibus, 
 
    nihil prompta deleniti eu mea. Id has alterum appellantur 
 
    delicatissimi, an <a href="form.html">vix justo mentitum</a>.Est 
 
    cu illud nihil. Ei mei iisque accumsan reprimique. 
 
</p>

フルページより良い、それを参照するには、スニペット。

Answer 2

あなたmouseenter機能は、この

のようになります。

$('.article-anchors li a').mouseenter(function() { 
    var title = $(this).attr('title'); 
    $(this).attr('title', $("[name="+title +"] h4").html()); 
})