Question

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

因此，对于该列，我有一个要选择的大小列表。一旦用户点击了大小值，标题将随锚标记中的标题值一起更改，即当用户选择了一个值（10cm）时，标题将从“手大小”更改为“手大小” ：10厘米“，但同时标题附近的超链接仍将出现在同一位置。

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

您可以将“手部大小”文字放入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>

Answer 2

您的超链接正在被替换，因为它在H3标记内。您的解决方案是将其置于H3标签之外，或者每次进行更改时将其重写为H3标签。

在致电$("#showcase").text(heading);

后，将此行添加到您的JQuery中

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

每次更改内容时，都会将锚重新插入H3元素。

如何在点击时替换h3标记中的文字但不更改其中的其他内容？

2 个答案: