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函数的不同场景。由于你的帮助，我认为我的语法非常接近，但是，差不多。如果你想看到，这里是网址：bind event handler on keydown listen function JavaScript jQuery 你们真的摇滚。

Answer 1

jQuery有.toggle(handlers)用于交替点击功能：

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

Fiddle

现在，如果你想要做的就是分别通过淡入/淡出来切换2个元素，你可以使用.fadeToggle()：

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

Fiddle

Answer 2

如果您想了解一些术语等，我会为您提供一些与语言无关的术语。

基本上，我会将您的要求称为“状态机”。

在它非常基本的情况下，状态机包含“状态”，“事件”和“转换函数”。在你的情况下，你有2个状态（让我们称之为“可见”和“隐藏”），一个事件（“点击”）和2个过渡函数（我们可以称之为“showContentOne”和“showContentTwo”）。

两个澄清术语：

状态是你的记忆（它告诉你过去发生了什么）
事件是任何会导致状态改变的外部活动
转换函数是一个函数，在状态改变事件发生时调用，目标是将状态从一个改变（或“转移”）到另一个状态（可能执行一些副作用）。

接下来，我将为您提供非常基本的（实际上是基本的）概念解释，但请记住，我在这里过分简化了一些内容 - 阅读书籍或维基百科中的相应文章以获得更准确的信息。

在您的情况下，可以用图表最好地描述状态机：

a state machine graph

那么如何正确实现这个呢？

你必须有一些变量来存储元素的状态。在您的代码段中，您使用了名为“hits”的全局变量。当你使用jQuery我会使用它的“数据”函数，它让你将任意数据绑定到你的DOM元素（这样你就可以在单个DOM树中安装许多独立的状态机）。然后，您需要绑定事件处理程序（这很简单，因为您只需要考虑一个事件 - 单击）并定义状态转换函数。最后，您需要一个函数来检查元素的状态，分析传入的事件并调用适当的状态转换函数。

一些基本的实现可能看起来像这样（我不会测试这段代码，将其视为伪代码以帮助您获得可执行的解决方案）

function showContentOne($element) {
     $('#content1').fadeIn("slow");
     $('#content2').fadeOut("slow");
     $element.data('state', 'hidden');
}

function showContentTwo($element) {
     $('#content1').fadeOut("slow");
     $('#content2').fadeIn("slow");         
     $element.data('state', 'visible');
}

function transitState($element, event) {
     var state = $element.data('state');
     if (state == 'visible' && event == 'click') {
          showContentTwo($element);
     } else if (state == 'hidden' && event == 'click') {
          showContentOne($element);
     } else {
          //unsupported transition - do nothing or raise error
     }
}

$(function(){
    $('#myButton')
        .data('state', 'visible') //initialize a state
        .click(function() { //install event handler
          transitState($(this), 'click');
        }
        //here you can possibly install more event handlers
    });
});

现在，如果您重新实现“transitState”以使用某些数组或对象（如状态机定义），您可以获得非常强大的解决方案来添加/删除事件和其他状态转换函数。您可以在任何元素上安装状态机，也许用jquery插件包装它。

注意：在您的情况下，我的解决方案是严重过度设计此任务。我提供它给你一些术语。您的基本问题（2个状态，2个转换，一个事件）可以很容易地以您在原始问题中显示的方式实现，只有改变我会做的不是使用全局变量，而是数据函数来维护状态。因为你有两个状态，所以保持它的布尔变量将非常好。

$(function(){

$('#myButton')
    .data('isVisible', true)
    .click(function(){
         if  ($(this).data('isVisible')) { 
              $('#content1').fadeIn("slow");
              $('#content2').fadeOut("slow");
         } else {
              $('#content1').fadeOut("slow");
              $('#content2').fadeIn("slow");
         }
         $(this).data('isVisible', !$(this).data('isVisibile'));
         return false;
    });
});

正如其他人所说的，在连续点击时更改元素的可见性，您可以使用切换功能。

抱歉我的英语不好：/

Answer 3

尝试：

$(function(){
            var hits = 0; //->variable
    // Everything below this line is called "binding" a handler to an event (click event)
    $('#myButton').click(function(){ // --> This whole function is the handler or listener
                    if  (hits % 2 !== 0) //for hits 2,4,6,8 etc. Also the condition
                    {
              $('#content1').fadeIn("slow");
              $('#content2').fadeOut("slow");
                    }
                    else
                    { // for hits 1,3,5,7
              $('#content1').fadeOut("slow");
              $('#content2').fadeIn("slow");
                    }
                   hits++;
        return false;
    });
});

Answer 4

我建议你看看jQuery's toggle()方法，它将被用作：

$(function() {
    $('#myButton').toggle(function(){...}, function(){...});
});

我还给你一个DIY方式的修改版本：

$(function(){
    var hits = 0;

    $('#myButton').click(function(){
        hits ^= 1;

        if  ( hits ) {
            $('#content1').fadeIn("slow");
            $('#content2').fadeOut("slow");
        } else {
            $('#content1').fadeOut("slow");
            $('#content2').fadeIn("slow");
        }

        return false;
    });
});

Answer 5

轻松实现这一目标的一种方法，也许是使它更优雅，就是编写这个简单的插件：

(function ($) {
    $.fn.rollerClick = function (handlers) {
        this.each(function () {
            this.hits = 0;
            $(this).click(function () {
                handlers[this.hits ++](this);
                if (this.hits == handlers.length) {
                    this.hits = 0;
                }
            }); 
        });
    };
)(jQuery);

现在您可以像这样使用它：

$("selector").rollerClick([
    function (element) {
        alert('1');
    },
    function (element) {
        alert('2');
    },
    function (element) {
        alert('3');
    }
]);

然后通过重复点击所选项目，您将滚动处理程序，看到警告弹出显示＆＃34; 1＆＃34;，＆＃34; 2＆＃34;，＆＃34; 3＆＃34;，＆＃34; 1＆＃34;，＆＃34; 2＆＃34;，...

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

5 个答案: