Javascript 切换html（）不工作_Javascript_Jquery_Html

Javascript 切换html（）不工作

javascript jquery html

Javascript 切换html（）不工作,javascript,jquery,html,Javascript,Jquery,Html,因此，我的计划是有一个h4标记，这样当在中单击时，将显示我的容器div，并将文本更改为“隐藏表单”。当用户再次单击文本时，表单隐藏，文本变回“显示表单”。我有自己的div动画正确，但文本给了我一个问题。当我最初单击它时，它会正确地更改为“隐藏表单”。但当再次单击时，div将隐藏，但文本将保持为“隐藏形式”。我尝试过使用if语句和$（this）选择器的多种变体，但没有成功。必须在Jquery中，而不是在vanilla JS中 $（'.wrapper'）.hide（）； var state1=“提

因此，我的计划是有一个h4标记，这样当在中单击时，将显示我的容器div，并将文本更改为“隐藏表单”。当用户再次单击文本时，表单隐藏，文本变回“显示表单”。我有自己的div动画正确，但文本给了我一个问题。当我最初单击它时，它会正确地更改为“隐藏表单”。但当再次单击时，div将隐藏，但文本将保持为“隐藏形式”。我尝试过使用if语句和$（this）选择器的多种变体，但没有成功。必须在Jquery中，而不是在vanilla JS中

$（'.wrapper'）.hide（）；
var state1=“提交详细信息”；
var state2=“隐藏表单”；
$（“#切换”）。单击（函数（）{
$（'.wrapper'）.slideToggle（1000）；
if（$（'#toggle'）.html（state1））{
$（'#toggle'）.html（state2）；
}else if（$（'#toggle'）.html（state2））{
$（'#toggle'）.html（state1）；
}
});

Ajax项目
提交详细信息
您可以使用$（this）.text（$（this）.text（）==state1？state2:state1）

注意：使用.text（）
而不是.html（）
，因为当html实际上是您想要更改的html时，没有理由更改它
它将根据所需结果更改文本
$('#toggle').click(function() {
  $('.wrapper').slideToggle(1000);
  $(this).text($(this).text() == state1 ? state2 : state1);
});


此
您需要比较变量state1
和state2

看看这个代码片段

$（'.wrapper'）.hide（）；
var state1=“提交详细信息”；
var state2=“隐藏表单”；
$（“#切换”）。单击（函数（）{
$（'.wrapper'）.slideToggle（1000）；
if（$（'#toggle'）.html（）==state1）{
$（'#toggle'）.html（state2）；
}else if（$（'#toggle'）.html（）==state2）{
$（'#toggle'）.html（state1）；
}
});

Ajax项目
提交详细信息
您只需设置HTML，而不检查当前状态
并不是说我自己会这样做，而是回答了你的问题：

$（'.wrapper'）.hide（）；
var state1=“提交详细信息”；
var state2=“隐藏表单”；
$（“#切换”）。单击（函数（）{
$（'.wrapper'）.slideToggle（1000）；
if（$（'#toggle'）.text（）==state1）
{
$（“#切换”）.text（state2）；
}
其他的
{
$（“#切换”）.text（state1）；
}
});
Ajax项目| Cian Tiernan
Ajax项目
提交详细信息
if（$（'#toggle'）.html（state1））这一行是用来比较div的html和state1变量的吗？@Phiter-Yescorrect@AlonEitan发布的JS在JS/main.JS文件中。非常感谢，现在工作得很好！我以前从未见过这种代码行，你介意告诉我它是如何工作的吗？你的思维过程是什么it@Cian当然，给我几秒钟时间更新question@Cian看看如何，希望它有意义
$('.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>