请查看此代码段

Question

所以我的计划是拥有一个h4标签，以便在点击时显示我的容器div并将文本更改为＆＃34;隐藏表单＆＃34;。当用户再次单击文本时，表单会隐藏，文本将更改回＆＃34;显示表单＆＃34;。我有正确的div动画，但文本给我一个问题。当我最初点击它时，它正确地更改为＆＃34;隐藏表单＆＃34;。但是当再次点击时，div隐藏但是文本保持在＆＃34;隐藏表单＆＃34;。我试过使用if语句和使用$（this）选择器的多种变体，但没有运气。必须在Jquery，而不是香草JS。

＆＃13;

$('.wrapper').hide();

var state1 = "Submit Details";
var state2 = "Hide form";

$('#toggle').click(function() {
  $('.wrapper').slideToggle(1000);

  if ($('#toggle').html(state1)) {
    $('#toggle').html(state2);
  } else if ($('#toggle').html(state2)) {
    $('#toggle').html(state1);
  }

});

＆＃13;

<header>
  <h3> Ajax Project </h3>
  <h4 id="toggle">Submit Details</h4>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

＆＃13;

Answer 1

您可以使用$(this).text($(this).text() == state1 ? state2 : state1)

注意：使用.text()而不是.html()，因为当HTML实际上是您要更改的HTML时，没有理由更改HTML。

它会根据所需的结果更改您的文字。

$('#toggle').click(function() {
  $('.wrapper').slideToggle(1000);
  $(this).text($(this).text() == state1 ? state2 : state1);
});

this＆lt; - 指我们正在使用('#toggle')
$(this).text() == state1＆lt; - 是一个基本问题。 text是否等于state1。
? state2 : state1表示如果我们的问题属实或堕落该怎么办。因此，如果真的使用state2，则使用state1

<强>演示

＆＃13;

$('.wrapper').hide();

var state1 = "Submit Details";
var state2 = "Hide form";

$('#toggle').click(function() {
  $('.wrapper').slideToggle(1000);
  $(this).text($(this).text() == state1 ? state2 : state1);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <h3> Ajax Project </h3>
  <h4 id="toggle">Submit Details</h4>
</header>
<div class="wrapper">
  <form class="" action="index.html" method="post">
awdawdaw
  </form>
</div>

＆＃13;

Answer 2

您需要比较变量state1和state2

请查看此代码段

$('.wrapper').hide();

var state1 = "Submit Details";
var state2 = "Hide form";

$('#toggle').click(function() {
  $('.wrapper').slideToggle(1000);

  if ($('#toggle').html() === state1) {
    $('#toggle').html(state2);
  } else if ($('#toggle').html() === state2) {
    $('#toggle').html(state1);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <h3> Ajax Project </h3>
  <h4 id="toggle">Submit Details</h4>
</header>
<div class="wrapper">
  <form class="" action="index.html" method="post">

  </form>
</div>

Answer 3

您只需设置HTML，而不是检查当前状态。

不是我自己会这样做，但它解决了你的问题： https://jsfiddle.net/u0bg7gb2/

$('.wrapper').hide();

var state1 = "Submit Details";
var state2 = "Hide form";

$('#toggle').click(function() {
  $('.wrapper').slideToggle(1000);

  if($('#toggle').text() == state1)
  {
    $('#toggle').text(state2);
  }
  else 
  {
    $('#toggle').text(state1);
  }

});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax Project | Cian Tiernan</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
    <header>
      <h3> Ajax Project </h3>
      <h4 id="toggle">Submit Details</h4>
    </header>
    <div class="wrapper">
      <form class="" action="index.html" method="post">

      </form>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

切换html（）不起作用

3 个答案:

请查看此代码段