Jquery 如何通过单击同一按钮使多个事件发生？_Jquery

Jquery 如何通过单击同一按钮使多个事件发生？

jquery

Jquery 如何通过单击同一按钮使多个事件发生？,jquery,Jquery,我的HTML文件中有一个div，我用它作为按钮当我点击这个按钮时，我希望我的当前图像消失，另一个图像出现在它的位置上。这是我一直在工作的地方但当我点击同一个按钮时，我希望当前图像淡出，第三个图像淡入。当我试着这样做时，我所有的图像都同时淡入淡出，我无法区分它们我如何使用相同的按钮，一旦我点击它淡出一个图像和淡入另一个图像等 <!DOCTYPE html> <html lang="en"> <head> <body> <d

我的HTML文件中有一个div，我用它作为按钮

当我点击这个按钮时，我希望我的当前图像消失，另一个图像出现在它的位置上。这是我一直在工作的地方

但当我点击同一个按钮时，我希望当前图像淡出，第三个图像淡入。当我试着这样做时，我所有的图像都同时淡入淡出，我无法区分它们

我如何使用相同的按钮，一旦我点击它淡出一个图像和淡入另一个图像等

<!DOCTYPE html>
<html lang="en">
  <head>
  <body>
    <div class="gameboy-button"></div>
  </body>
<html>

问题是您的代码正在向对象的单击处理程序添加两个事件。所有代码都是在按下按钮之前执行的，所以每次按下按钮都会发生这两种情况。要更正此问题，您可以在单击按钮后更改单击事件：

$（'.gameboy按钮'）。单击（函数（）{
$（'.gb1'）.fadeToggle（500）；
$（'.gb2'）。衰减切换（3000）；
//在第一次单击事件期间，取消绑定此事件
$（this.unbind（'click'）；
//然后在下次单击时绑定一个新的单击事件
$（此）。单击（函数（）{
$（'.gb2'）。衰减（500）；
$（'.gb3'）.fadeIn（3000）；
});
});

.gb2、.gb3{
显示：无；
}
点击我
我是英国人
我是国标二号
我三岁了
您只需循环图像即可
但要小心褪色延迟。。。如果单击过快，可能会导致许多同时出现的动画。这就是为什么在这里使用，以停止当前动画队列
然后，如果您有3个图像，单击4次后会发生什么情况？

您必须知道您有多少图像…

然后，将图像编号保持在范围内
最后一件事。。。您必须使用前一个图像淡出的回调，以避免两个图像同时可见

$（文档）.ready（函数（）{
//当我的页面加载我想要的内容时，此图像会自动淡入。。。
美元（“.gb1”）.fadeIn（3000）；
var-mg=1；
var ImgCount=$（“[class^='gb']”）。长度；
//当您单击此按钮时，gb1淡出，gb2淡出，这很好。。。。
$（'.gameboy按钮'）。单击（函数（）{
nextImg=（实际百分比ImgCount）+1；
console.log（nextImg）；
$（“[class^='gb']”）.stop（）.fadeOut（500，函数（）{
$（“.gb”+nextImg.stop（）.fadeIn（3000）；
});
mg++；
});
});
.gameboy按钮{
边框：1px纯黑；
边界半径：6px；
宽度：8em；
文本对齐：居中；
填充：0.3em；
}
[class^='gb']{
显示：无；
}

游戏机按钮
您是否尝试此操作尝试获取函数中的所有内容

var指数=1；
函数fadeInPic（）{
$（'.gb1'）.fadeIn（3000）。延迟（500）；
}
函数FadeInputByClick（）{
log（$（'.toggleDiv'）.length）；
var currentIndex=指数；
索引++；
if（$（'.toggleDiv'）.length+1==索引）{
currentindex=$（'.toggleDiv'）.length；
指数=1；
}
$（'.gb'+currentIndex）.fadeOut（500）；
美元（'.gb'+指数）.fadeIn（3000）；
}
$（文档）.ready（函数（）{
//当我的页面加载我想要的内容时，此图像会自动淡入。。。
fadeInPic（）；
//当您单击此按钮时，gb1淡出，gb2淡出，这很好。。。。
$（'.gameboy按钮'）。单击（函数（）{
FadeInputByClick（）；
});
});

我想是纽扣吧
gb1
gb2
gb3
您是否可以更新您的问题，以包含您希望使用的HTML示例？您能否告诉我们，两个单击处理程序中的一个或另一个应该为同一个按钮触发的确切逻辑？一旦你描述了这一点，也许有人能给出一个答案。这正是我想要的。简明扼要。非常感谢@Subhuman如果您完全测试它并发现它确实是您所寻找的，您将希望接受它作为答案。就目前而言，您的代码出错是因为“$未定义”。@BobRodes，我已经按照您的建议进行了编辑，因此您现在可以看到正在运行的代码了！看起来好多了。：）请添加更多上下文。只将代码作为答案是不好的。我同意，但当我想编辑时，它已经被回答了。
$(document).ready(function(){

  //This image automatically fades in when my page loads which I want...
  $('.gb1').fadeIn(3000).delay(500);

  //When you click this button gb1 fades out and gb2 fades in which is fine....
  $('.gameboy-button').click(function(){
    $('.gb1').fadeOut(500);
    $('.gb2').fadeIn(3000);
  });

  //When you click this same button again I want gb2 to fade out and gb3 to fade in
  $('.gameboy-button').click(function(){
    $('.gb2').fadeOut(500);
    $('.gb3').fadeIn(3000);
  });

});

$('.gameboy-button').click(function(){
$('.gb1').fadeOut(500);
$('.gb2').fadeIn(3000);
$('.gameboy-button').off('click').click(function(){
$('.gb2').fadeOut(500);
$('.gb3').fadeIn(3000);
});