Question

我想我可能正在使用错误的js库。不知道..我在网上关注了一个教程，我看到了那个人的代码，看着它的工作原理。我复习了两次并完成了它仍然没有用。

这是我的html：

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title</title>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="hideshow.js"></script>

</head>
<body>

<a href="#" id="hideshow">Hide </a>

<div id="message" style="width:300px; border:1px solid black; padding:10px">

This is the wording inside of the text for testing purposes.

</div>
</body>

这是来自hideshow.js的我的js：

$('#hideshow').toggle(function () {

$('#hideshow').text('Show');

}, function () {

$('#hideshow').text('Hide');
});

我很感激，谢谢你能想出来的人。：（

Answer 1

看起来你正在尝试使用toggle event，它在jQuery 1.8中已弃用，并在jQuery 1.9上删除。新的切换功能有许多不同的重载，但没有一个像旧的那样。 Take a look at it并选择最适合您的那个。例如，你可以这样做：

$('#hideshow').click(function () {
    $('#message').toggle();
    if($('#message').is(':visible')) {
        $('#hideshow').text('Hide');        
    } else {
        $('#hideshow').text('Show');   
    }
});

这是一个让你玩的小提琴。 http://jsfiddle.net/74GzV/1/

Answer 2

正如j08691所指出的那样，toggle被删除了，但即使它不是<script src="hideshow.js"></script>在页面加载之前就已经运行，因此#hideshow将被定义为未定义。在解决缺乏$(document).ready

之后，尝试将整个事情放在toggle中

Answer 3

var toggler = $('#hideshow');
toggler.text('Hide');

toggler.click(function(e) {
    e.preventDefault();
    $('#message').slideToggle('slow', function () {
      var togglerLabel = $(this).is(':visible') ? 'Hide' : 'Show';
      toggler.text(togglerLabel);
    });
});

http://jsfiddle.net/4TqQT/46/

简单的jquery切换（不工作）

3 个答案: