Javascript JQuery简单动画不工作_Javascript_Jquery_Html

Javascript JQuery简单动画不工作

javascript jquery html

Javascript JQuery简单动画不工作,javascript,jquery,html,Javascript,Jquery,Html,我一直在尝试使用jQuery创建一个简单的动画，唯一的问题是，不管我尝试了什么，它似乎从来都不起作用。我所要做的就是创建一个显示/隐藏按钮，显示然后隐藏一个句子。我两天前才开始学习jQuery，所以可能有一个简单的错误这是我的密码： <body> <input type="button" value="Hide" id="toggle_message" /> <p id="message">You can see this</p>

我一直在尝试使用jQuery创建一个简单的动画，唯一的问题是，不管我尝试了什么，它似乎从来都不起作用。我所要做的就是创建一个显示/隐藏按钮，显示然后隐藏一个句子。我两天前才开始学习jQuery，所以可能有一个简单的错误

这是我的密码：

<body>
    <input type="button" value="Hide" id="toggle_message" />
    <p id="message">You can see this</p>
    <script type="text/javascript" src="JQuery\jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="JQuery\toggle.js"></script>
</body>

即使将文本保存为.js文件，也不会像HTML中那样改变颜色。有人能澄清一下这是否应该发生吗。如果有帮助的话，我现在正在使用记事本+。

您的选择器不正确。jQuery使用CSS样式选择器，因此在尝试使用具有id属性的项时，需要执行诸如“#切换#消息”和“#消息”之类的操作。

正如前面所述，这是您需要的代码。唯一的问题是引用

id时缺少

$('#toggle_message').click(function() {
    var value = $('#toggle_message').attr('value');
    $('#message').toggle('fast');

    if (value == 'Hide') {
        $('#toggle_message').attr('value', 'Show');
    } else if (value == 'Show') {
        $('#toggle_message').attr('value', 'Hide');
    }
 });

选择器语法稍有错误，可以稍微简化代码
$('#toggle_message').click(function() {
  $('#message').toggle('fast');

  if ($(this).val() == 'Hide') {
    $(this).val('Show');
  } else {
    $(this).val('Hide');
  }
}

jQuery中的选择器通常在按id选择时使用#
，或在按类选择时使用

在函数内部，因为它是在#toggle_message
元素上调用的，所以您可以简单地将它引用为$（this）
$（“toggle_message”）
应该是$（“#toggle_message”）以通过其ID获取元素，对于message也是如此。另外，jQuery有一个非常方便的方法。
$('#toggle_message').click(function() {
  $('#message').toggle('fast');

  if ($(this).val() == 'Hide') {
    $(this).val('Show');
  } else {
    $(this).val('Hide');
  }
}