Question

想出如何使我的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>

Answer 1

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

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

我不知道为什么您使用[]作为您的ID，您可以使用elementN N，其中new是一个数字。

此外，尽管JS是一种OOP语言，但在创建本机对象时应避免使用newNum语法（但也有例外，如预定长度数组）。您的var newNum = num + 1;可以像这样创建：

{{1}}

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

Firebug可以在调试时更有用吗？备择方案？

1 个答案: