2

JavaScript を機能させる方法を見つけましたが、本当に、本当に、本当に長い時間がかかりました。JavaScriptを避け続けたいと思うには十分です。複雑なページから始めて、それを縮小し、少しずつ変更して、機能する単純な例にしました。

最終的に、角括弧は 2 つのバックスラッシュでエスケープする必要があることがわかりました。しかし、常にではありません-明らかにセレクターではありますが、 .attr('id', 'element[' + newNum + ']' コンテキストではそうではありません。そこでのエスケープは間違っています。

どうすればこれをもっと早く理解できたでしょうか？私はあまり JavaScript を書いたり、Firebug をあまり使用したりしていません。なぜなら、C++ では (多くの場合) エラーを見つけるのがより迅速だったはずの場所で、多くの時間を浪費しているように思われるからです。

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に使用しているのかわかりません.where elementNis Na numberを使用できます。

さらに、JS は OOP 言語ですが、newネイティブ オブジェクトを作成する際に構文を使用しないでください (ただし、所定の長さの配列などの例外があります)。次のように作成newNumできます。

var newNum = num + 1;

Firebug は、最も好まれるデバッグ ツールの 1 つです。何も報告されない場合、それは彼らのバグであるか、あなたのコードは正常に動作しているが、期待どおりに動作していないかのいずれかです。

于 2013-04-30T07:39:30.327 に答える