Question

我有一个由锚标记限定的文本。一旦用户单击它，它应该在两个文本之间切换。

我知道如何在JQuery中切换按钮，但不知道如何使用链接实现它。

<h1>Questions and Answers</h1>
<p>First Question: What is the capital of Germany?
    <br>
    <i>Click <b><a id="toggle_this"></a>Here</a></b> to show/hide answer!</i>
</p>
<p>Answer: Berlin.</p>

<script>
  $(document).ready(function() {
    $("toggle_this").click(function() {
      $(this).hide();
    });
  });
</script>

Answer 1

首先将id更改为class="toggle_this"。然后使用选择器.toggle_this。

然后，如果链接，您可以使用e.preventDefault()来停止默认操作。然后使用closest()和next()，您可以得到答案<p>，然后toggle()。

$(".toggle_this").click(function (e) {
    e.preventDefault();
    $(this).closest('p').next().toggle();
});

Answer 2

你可以使用jQuery（你也可以使用普通的'JS，但看起来你之前使用的是jQuery），使用.on方法。虽然，我首先建议你在答案中添加一个类/ id，所以它更清晰一点：

$(document).ready(function () {
  $('#toggle_this').on('click', function (event) {
    event.preventDefault();
    $('#answer').toggle();
  });
});

编辑：event.preventDefault()阻止锚标记导航到href，.on注册事件处理程序，以便在事件触发时执行指定的函数。

Answer 3

首先，你在＆＃39; Here＆＃39;之前有一个迷路的关闭锚</a>标签。此外，我还要<p>试图隐藏身份证明，例如。 <p id="answer">。

将jQuery更新为此。

$(document).ready(function() {
  $("#answer").hide();
    $("#toggle_this").click(function() {
      $("#answer").toggle();
    });
});

如何切换链接（而不是按钮）以显示和隐藏文本

3 个答案: