gpt4 book ai didi

javascript - 不显眼的 JavaScript

转载 作者:行者123 更新时间:2023-11-29 10:44:00 25 4
gpt4 key购买 nike

我很想学习 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 在那里,但有一个显示:无;并且#message 也没有显示。我无法让它工作,也无法找出我做错了什么。如果有人可以帮助我,那就太好了。

最佳答案

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 - 不显眼的 JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23014826/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com