javascript onclick事件,每次点击相同元素的功能不同

Question

我正在尝试创建一个onclick函数,每次单击都有2个结果中的一个.换句话说,当用户第一次点击onclick元素时,结果1发生; 然后用户第二次点击相同的元素,结果2发生.当用户第三次点击元素时,结果1再次发生; 点击,结果2发生; 等等,就像一个循环.下面是一些伪jQuery来举例说明......

$(function(){
            var hits = 0;
    $('#myButton').click(function(){
                    if  (var hits = pos ) 
                    {
              $('#content1').fadeIn("slow");
              $('#content2').fadeOut("slow");
                    }
                    else
                    {
              $('#content1').fadeOut("slow");
              $('#content2').fadeIn("slow");
                    }
        return false;
    });
});

我很难找到答案,因为术语可能会有很大不同.从'变量'到'触发'到'数组'到'监听器'到'处理程序'再到'条件'到'绑定'....我在哪里开始搜索？我知道有多种方法可以创建我的功能,但我知道这是找到最简单,最有效的方法的最佳网站.所以除了在语法上帮助我之外,我还想要一些术语帮助我列出的单词集.我知道每个术语的一般含义,但是当我将它们应用到我想要创建的场景/函数时,它们各自在哪里发挥作用？我认为这将有助于为很多人解决问题.提前致谢.

感谢大家提供快速,精细,专业的反馈.我将利用这一新知识发挥其优势.JQuery确实让事情变得简单,几乎太容易了.但是,我问这个问题的主要原因是将它应用于keydown函数,而不是单击函数.我以为我可以找到一个答案并交换一些代码,也许用普通的javascript这可行.我发布了一个新问题,它使用了您提供的知识和反馈,并提出了涉及keydown函数的不同场景.由于你的帮助,我认为我的语法非常接近,但是,差不多.如果你想看到,这里是keydown上 的url:bind事件处理程序listen函数JavaScript jQuery 你们真正摇滚.

Answer 1

jQuery具有.toggle(handlers)交替点击功能:

$('#myButton').toggle(function() {
    $('#content1').fadeIn("slow");
    $('#content2').fadeOut("slow");
}, function() {
    $('#content1').fadeOut("slow");
    $('#content2').fadeIn("slow");
});

小提琴

现在,如果您只想通过分别淡入/淡出来切换2个元素,您可以使用.fadeToggle():

$('#myButton').click(function() {
    $('#content1, #content2').fadeToggle("slow");
});

小提琴