2

想出了如何让我的 javascript 工作，但它花了非常非常非常长的时间。足以让我希望继续避免使用 javascript。我从一个复杂的页面开始，并不断地减少它并一点一点地将其更改为一个有效的简单示例。

最终发现方括号必须用两个反斜杠转义。但并非总是如此 - 显然在选择器中 - 但不是在 .attr('id', 'element[' + newNum + ']' 上下文中，然后转义那里是错误的。

我怎么能更快地弄清楚这一点？我没有写太多的 javascript 或使用 Firebug，因为我似乎浪费了太多时间，在 c++ 中错误会（通常）更快地找到，以至于我对 javascript 感到恼火并避免使用它。

运行不适用于 Firebug 打开的代码显示没有错误。我已经尝试过脚本和控制台选项卡。

单击此按钮时，没有可见的反应。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#btnAdd').click(function() {
          var num = $('.element').length-1;
          var newNum = new Number(num + 1);
          var newElem = $('#element[' + num + ']').clone().attr('id', 'element[' + newNum + ']');
          $('#element[' + num + ']').after(newElem);
        });
      });
    </script>
  </head>
  <body>
    <form id="myForm">
      <div id="element[0]" class="element">
        description
        <input type="text" name="element[0][description]" id="element[0][description]" value="desc0" />
      </div>
      <input type="button" id="btnAdd" value="add another name" />
    </form>
  </body>
</html>

单击此按钮时，将按预期创建一个新的列表元素。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
          $('#btnAdd').click(function() {
            var num = $('.element').length-1;
            var newNum = new Number(num + 1);
            var newElem = $('#element\\[' + num + '\\]').clone().attr('id', 'element[' + newNum + ']');
            $('#element\\[' + num + '\\]').after(newElem);
          });
        });
    </script>
  </head>
  <body>
    <form id="myForm">
      <div id="element[0]" class="element">
        description
        <input type="text" name="element[0][description]" id="element[0][description]" value="desc0" />
      </div>
      <input type="button" id="btnAdd" value="add another name" />
    </form>
  </body>
</html>
4

1 回答 1

2

在选择器中，[]具有特殊含义。它表示找到一个属性。例如，以下代码查找文件类型的输入：

var fileInputs = $('input[type=file]');

我不知道你为什么要使用[]你的 id，你可以用elementNwhereN是一个数字。

此外，虽然 JS 是一种 OOP 语言，但请避免new在创建原生对象时使用语法（但也有例外，例如预定长度的数组）。你newNum可以这样创建：

var newNum = num + 1;

至于 Firebug，它是最受欢迎的调试工具之一。如果它没有报告任何内容，那么要么是他们的错误，要么是你的代码工作得很好，但不是你期望的那样。

于 2013-04-30T07:39:30.327 回答