如何克服函数嵌套

how do I overcome nesting in functions?

本文关键字：函数 嵌套 克服 何克服      更新时间：2023-09-26

我是javascript和jquery的新手，并且遇到了一个问题，我还没有找到解决方案。我将尝试用一种相当简单的方式来描绘它。

我有一个页面为用户提供了一些选择(这是一款游戏，所以…)，如攻击或防御，使用什么武器。然后加载两个html文件，每个都有一个"提交"按钮。提交按钮绑定到(单独的)函数，这些函数将数据传递给ajax。

我遇到的问题是我被嵌套函数所淹没。明白了吗?我的代码看起来像这样:

代码:

$(function() {
  $('#choice1').click(function() {
        //do some stuff
  });
  $('#choice2').click(function() {
         //do some stuff
   });
  $('#choice3').click(function() {
        //do some stuff, including creating the choices below, and their submit boxes
        $('#subChoice1').click(function() {
              //send data with ajax to a php document.  get result
              //create some text on my document to display results
              //create an input button, along with an id="subButton1"
        });
        $('#subChoice2').click(function() {
              //send data with ajax to a php document.  get result
              //create some text on my document to display results
              //create an input button, along with id="subButton1"
              //(yes, feed both back to same func)
        });
  });  // end choice3
  $('#subButton1').click(function() {
              //my buttons in the subChoices do not call this function(!!??)
  });
});

edit: link不再工作，抱歉。我在这里创建了一个活生生的例子。

谢谢你的任何提示或指示。我几乎可以肯定，只是有一些简单的东西，我错过了或没有意识到，这将使我走上正确的轨道。

您总是可以使用普通的命名函数而不是内联匿名函数。如果函数堆积如山，这可能会有所帮助。

更新:

这是你的工作案例1:

    $('#button1').click(function(){
        $('#div1').append('<span id="span1"><br>Alright. Button 1 worked.  Here''s another button.</br></span>');
        $('#div1').append('<input type="button" value = "Button 2" id="button2"/>')
        $('#button2').click(function() {
            $('#div1').append('<span id="span1"><br>Hey!  Button 2 worked!.  Let''s keep going.</br></span>');
            $('#div1').append('<input type="button" value = "Button 3" id="button3"/>')
                $('#button3').click(function() {
                    $('#div1').append('<span id="span1"><br>Hey!  Button 3 worked!.  That''s probably enough.</br></span>');
                });
        });
    });

我的建议是这样更新它:

    function button3_click() {
        $('#div1').append('<span id="span1"><br>Hey!  Button 3 worked!.  That''s probably enough.</br></span>');
    }
    function button2_click() {
         $('#div1').append('<span id="span1"><br>Hey!  Button 2 worked!.  Let''s keep going.</br></span>');
         $('#div1').append('<input type="button" value = "Button 3" id="button3"/>');
         $('#button3').click(button3_click);
    }
    function button1_click() {
        $('#div1').append('<span id="span1"><br>Alright. Button 1 worked.  Here''s another button.</br></span>');
        $('#div1').append('<input type="button" value = "Button 2" id="button2"/>')
        $('#button2').click(button2_click);
    }
    $('#button1').click(button1_click);

这样逻辑结构保持不变，但是可以取出嵌套的函数定义。

如果您一直重用类或id的提交按钮，您可以利用jQuery的live()方法。它将允许您在父选项的单击处理程序之外为$('#subChoice1')和$('#subChoice2')创建绑定，但在创建时仍然将它们正确绑定。

相关文章：