不引人注目的JavaScript

Question

我正在学习JavaScript，我正在学习一些教程。 其中一个是教授Unobtrusive JavaScript代码的简单代码。 代码很简单，它需要在JavaScript未激活时显示消息，当它处于活动状态时，它需要显示可点击的加号。

在html代码下面：

 <body>
     <h1 id="title">18. Unobtrusive JavaScript</h1>
     <p id="main">

     </p>
     <p id="message">You should see this whether JavaScript is on or off.</p>
 </body>

和JavaScript / jQuery代码：

$(function() {
    $('#main').append("<img src='plus-8.png' alt='Click me to see the paragraph'    id='clickMe' />");

$('#clickMe').toggle(function() {
    $('#message').show('fast');
    $('#clickMe').attr('src', 'minus-8.png');

}, function() {
    $('#message').hide('slow');
    $('#clickMe').attr('src', 'plus-8.png');
});

$('#message').hide();

});

我只看到加号很快出现，然后就消失了。 当我查看源代码时，＃main就在那里但是有一个display：none; 并且#message也没有显示。 我无法让它工作，也无法找出我做错了什么。 如果有人可以帮助我，那就太好了。

Answer 1

jQuery toggle方法可以采用三个参数，第一个是持续时间，第二个是缓动（快速，慢速），第三个是动画完成时的函数回调。 您在toggle方法中传递了两个函数，因此当它完成显示您的消息时，它会在第二个函数回调中隐藏它。

做这样的事情：

$('#clickMe').click(function() {
    $('#message').toggle('slow');

    // If image is plus, display minus
    // If image is minus, display plus
    if($('#clickMe').attr('src') === 'plus.svg') {
        $( '#clickMe').attr('src', 'minus.svg');
    } else {
        $( '#clickMe').attr('src', 'plus.svg');
    }
});

不引人注目的JavaScript

问题描述

1 个解决方案

解决方案1
3 2014-04-11 14:19:31

不引人注目的JavaScript

问题描述

1 个解决方案

解决方案1 3 2014-04-11 14:19:31

解决方案1
3 2014-04-11 14:19:31