jquery - 如何在单击时替换 h3 标签中的文本而不更改其中的其他内容？

Question

JSFiddle

我有一个名为“Hand Size”的列，样式为 h3，同时在 h3 标签中有一个超链接，这样我就可以将标题“Hand Size”和超链接保持在同一行。

因此对于该列，我有一个要选择的尺寸列表。一旦用户点击尺寸值，标题将更改为 anchor 标签中的标题值，即当用户选择一个值(10cm)时，标题将从“Hand Size”更改为“Hand Size” : 10 cm”，但同时标题附近的超链接仍会出现在相同位置。

//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标签中的超链接的情况下替换标题呢？非常感谢……

更新:

-点击前:

-预期结果:

-点击后的当前结果:(右边超链接消失)

Answer 1

您可以将您的“Hand Size”文本放入一个span 中并仅更改它。请尝试:

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

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

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