Jquery 切换文本，选择所有实例

Question

所以我遇到的问题是我有这个 Div“Reply”，里面有一个 h1 标签，里面有 Hide 一词。 Hide 这个词被包裹在一个带有“Toggle”类的 span 标签中，我有 Jquery 代码，基本上说每次你点击 Div 时，它都会切换 span 标签中的隐藏文本以显示，当然，如果你再次点击它会恢复正常，我遇到的问题是我有这些类的多个实例，并且它更改了其他类的文本。我想知道 jquery 中是否有一种方法可以只切换我点击的特定类，同时保持所有其他类相同(因为我需要经常重用它们)。

Jquery

  $('.Reply').toggle (
    function()  { $("span.Toggle").html("Show");}
    ,function()  { $("span.Toggle").html("Hide");}
   );

HTML

<div class="Reply">
  <h1><span class="Toggle">Hide</span> This Text</h1>
</div>

<div class="Reply">
  <h1><span class="Toggle">Hide</span> This Text</h1>
</div>

Answer 1

是的，使用this作为context in the selector所以它只会更改当前单击的 div 内的切换

$('.Reply').toggle( function () {
  $("span.Toggle", this).html("Show");
}, function () {
  $("span.Toggle", this).html("Hide");
});

上下文选择器的工作方式与 find() 完全相同

$(this).find("span.Toggle")

FIDDLE