0

我正在尝试创建一个 onclick 函数，该函数在每次单击时具有 2 个结果中的 1 个。换句话说，当用户第一次点击 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 函数，而不是 click 函数。我想我可以找到答案并交换一些代码，也许使用普通的 javascript 就可以了。我发布了一个新问题，该问题使用了大家提供的知识和反馈，并提出了一个涉及 keydown 功能的不同场景。由于您的帮助，我认为我的语法非常接近，但是几乎没有。如果你想看，这里是 url：在 keydown 监听函数上绑定事件处理程序 JavaScript jQuery 你们真的很摇滚。

4

5 回答 5

5

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");
});

小提琴

于 2012-10-20T19:55:34.597 回答
2

如您想知道一些术语等。我将为您提供一些与语言无关的术语。

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

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

两个澄清术语：

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

接下来，我将为您提供非常基本（实际上太基本）的概念解释，但请记住，我在这里过于简单化了 - 阅读书籍甚至维基百科中的适当文章以获得更准确的信息。

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

状态机图

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

您必须有一些变量来存储元素的状态。在您的代码片段中，您使用了名为“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;
    });
});

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

对不起我糟糕的英语：/

于 2012-10-20T20:30:53.807 回答
1

尝试：

$(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;
    });
});
于 2012-10-20T19:55:52.210 回答
0

我可以建议你看看jQuery 的 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;
    });
});
于 2012-10-20T19:56:20.230 回答
0

轻松实现这一点的一种方法，也许让它更优雅一些，是编写这个简单的插件：

(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');
    }
]);

然后通过重复单击所选项目，您将滚动处理程序，看到弹出的警报显示“1”、“2”、“3”、“1”、“2”……。

于 2012-10-20T19:57:41.587 回答