クリックでh3タグのテキストを置き換えることはできますが、他のコンテンツは変更しないでください。

Question

JSFiddle

私は、H3のスタイルで「ハンドサイズ」と呼ばれる列を持っていると私は同じに見出し「ハンドサイズ」と、ハイパーリンクを保つことができるように、同時にH3タグ内のハイパーリンクがあります行。

その列では、選択するサイズのリストがあります。ユーザーがサイズ値をクリックすると、見出しはアンカータグのタイトル値で変更されます。つまり、ユーザーが値（10cm）を選択すると、見出しが「ハンドサイズ」から「ハンドサイズ：10cm "と表示されますが、同時にタイトルの近くのハイパーリンクは同じ位置に表示されます。

//Hand Size selection 
      $(function(){ 
       $(".hand-value a").click(function(){ 
       var heading = $(this).attr("title"); 
       $("#showcase").text(heading); 

       var clicked = $(this).parent(); 
       $(".hand-value").removeClass("active"); 
       $(clicked).addClass("active"); 
      }); 
      }) 

私はそれのためにいくつかのjQueryを作成しました。同封のJSFiddleを見てください。しかし問題は、値を選択すると、見出しが目的のものに変わりますが、ハイパーリンクも置き換えられるということです。

したがって、h3タグのハイパーリンクを置き換えずに見出しを置き換えることはできますか？どうもありがとうございます…。

更新：

-beforeクリック：

-Expected結果：

クリックした後、結果-current：（右のハイパーリンクが消えました）

Answer 1

「手のサイズ」のテキストをspanに入れて、これだけを変更することができます。試してみてください：

$(function(){ 
 
\t $(".hand-value a").click(function(){ 
 
      \t \t var heading = $(this).attr("title"); 
 
      \t \t $("#handSize").text(heading); 
 

 
      \t \t var clicked = $(this).parent(); 
 
      \t \t $(".hand-value").removeClass("active"); 
 
      \t \t $(clicked).addClass("active"); 
 
      \t }); 
 
})

#sizeGuide{ 
 
    float:right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3 id="showcase"> 
 
    <span id="handSize">Hand Size</span> 
 
    <a href="google.com" id="sizeGuide"> 
 
    Sizing Guide 
 
    </a> 
 
</h3> 
 

 
<ul> 
 
    <li class="hand-value"> 
 
    <a href="#" title="Hand Size : 10 cm">10</a> 
 
    </li> 
 
    <li class="hand-value"> 
 
    <a href="#" title="Hand Size : 11 cm">11</a> 
 
    </li> 
 
    <li class="hand-value"> 
 
    <a href="#" title="Hand Size : 12 cm">12</a> 
 
    </li> 
 
</ul>

Answer 2

あなたのハイパーリンクは、H3タグ内にあるため、置き換え中です。あなたの解決策は、H3タグの外に置くか、変更するたびにH3タグに書き換えることです。あなたはH3要素にあなたがその内容を変更するたびに、あなたのアンカーを再挿入します$("#showcase").text(heading);

$(" <a href='google.com' id='sizeGuide'>Sizing Guide</a>").appendTo("#showcase"); 

これを呼び出した後

はあなたのjQueryのに次の行を追加します。