嗨，大家好，
我正在开发一些jQuery，并尝试淡出和添加单个元素。
我要实现的目标是，单击HTML按钮元素后使其淡出，替换其中的文本，然后使用新文本将按钮褪回。但是当我添加fadeOut（）时；＆ 淡入（）; 仅对首次单击处理程序起作用，它会在每次单击鼠标时创建一个淡入/淡入循环。我只希望第一次单击淡出＆进入按钮元素。
这段代码仅用于＆上的实验，因为我只是在学习jQuery，因此如果我无法找到此问题的答案，那并不是那么重要。这个问题只是出于好奇，您是否可以以某种方式阻止效果循环。
HTML代码：
<!doctype html>
<html lang="en">
<head>
<title>jQuery Test</title>
<meta name="description" content="jQuery Test">
<meta name="author" content="Shannon">
<meta charset="utf-8">
<link rel="stylesheet" href="">
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<button type="button">Click Me</button>
</body>
</html>
jQuery代码：（在添加渐变效果之前）
$(document).ready(function(){
$("button").click(function(){
$("button").text("You clicked me!");
$("button").click(function(){
$("button").text("You clicked me again!!");
$("button").click(function(){
$("button").text("You clicked me 3 times!!!");
});
});
});
});
jQuery代码：（添加淡入淡出效果后）
$(document).ready(function(){
$("button").click(function(){
$("button").fadeOut();
$("button").text("You clicked me!");
$("button").fadeIn();
$("button").click(function(){
$("button").text("You clicked me again!!");
$("button").click(function(){
$("button").text("You clicked me 3 times!!!");
});
});
});
});
感谢您抽出宝贵的时间阅读我的问题，并原谅我是否违反了提问规则，因为这是我第一次
-
编辑：
谢谢大家这么快回答我的问题。大家对您在jQuery方面的努力和知识应给予赞扬。如您所知，我仍然是一个新手，任重道远...
-
一种解决方案是使用开和关来附加/分离点击：
$(document).ready(function () {
$("button").on('click',function () {
$("button").off('click');
$("button").fadeOut(function () {
$("button").text("You clicked me!");
$("button").fadeIn();
});
$("button").on('click', function () {
$("button").off('click');
$("button").text("You clicked me again!!");
$("button").click(function () {
$("button").text("You clicked me 3 times!!!");
});
});
});
});
我还设置了文本，并在淡出完成后淡入。
由于选择器使用率很低，几乎就像PSL的第一个示例一样，我将发布一个更简洁的版本：
$(document).ready(function () {
$("button").on('click',function () {
var $button = $(this);
$button.off('click');
$button.fadeOut(function () {
$button.text("You clicked me!");
$button.fadeIn();
});
$button.on('click', function () {
$button.off('click');
$button.text("You clicked me again!!");
$button.click(function () {
$button.text("You clicked me 3 times!!!");
});
});
});
});
虽然这段代码几乎与PSL同时发布的代码完全相同，但是现在选择抱怨，但是我同意这是一个关于如何使用选择器的非常糟糕的示例。$（“ button”）的重复使用仅出于演示目的，除受过训练的特技编码器外，任何人都不应尝试使用它:)
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句