0

これは非常に簡単な質問です。変数「inputNumber」をここに追加する html スニペットに入力しようとしています。inputNumber は、この html を追加するたびにインクリメントする必要があります。

したがって、基本的には、「addMore」がクリックされるたびに、入力名、ID、および div ID を 5 から増やしたいと考えています。

var inputNumber = 5;

$("#addMore").click(function() {
$("#input-names").append("<input type='text' id='name' + inputNumber++ name='name' + inputNumber++> <div class='delete-line' id='delete-' + inputNumber++><a href='JavaScript:void(0);'>X</a></div><br>");
});
4

2 に答える 2

4

変数を挿入する前に文字列を終了しなかっただけです。

var inputNumber = 5;

$("#addMore").click(function() {
  inputNumber++;
  $("#input-names").append("<input type='text' id='name"+ inputNumber +"' name='name"+ inputNumber +"' > <div class='delete-line' id='delete-"+ inputNumber +"'><a href='JavaScript:void(0);'>X</a></div><br>");
});

コードの違いを強調する構文で確認できます。IDE にもこの機能が必要です。

インクリメント演算子 (++) を数回使用しようとしました。呼び出すたびinputNumber++に値がインクリメントされるため、これも問題です。つまり、コード (引用符が修正された状態) では、inputNumber++3 回呼び出したため、値を 3 ずつ増やしていたことを意味します。inputNumber++クリック コールバックの開始時に 1 回だけ呼び出すことで、この動作を変更しました。

また、この構文を使用して属性を持つ要素を作成することにより、コードの読みやすさを改善することを検討することもできます-

var inputElem = $('<input />', {
    type: 'text',
    id: 'name'+inputNumber,
    name: 'name'+inputNumber
});
于 2013-04-25T00:16:43.700 に答える
1

追加の外側で一度呼び出しinputNumber++ます。そうしないと、追加する長い文字列内で指定されるたびにインクリメントされます。インクリメント演算子は自己代入型です。つまり、1 ずつインクリメントし、一度にインクリメントされた値に代入します。に相当するコードinputNumber = inputNumber + 1

$("#addMore").click(function() {
    inputNumber++;
    $("#input-names").append("<input type='text' id='name" + inputNumber + "' name='name" + inputNumber + "'> <div class='delete-line' id='delete-" + inputNumber + "'><a href='JavaScript:void(0);'>X</a></div><br>");
});

他の方法では、最初のクリックの結果の HTML は次のようになります。

<input type='text' id='name6' name='name7' />
<div class='delete-line' id='delete8'>
    <a href='javascript:void(0);'>X</a>
</div>

また、テキストの文字列が正しく連結されていることを確認してください。

于 2013-04-25T00:18:27.717 に答える