動的IDに動的整数値を追加しようとしました

Question

btnExportをクリックしている間に生成された動的IDに動的整数値を追加しようとしています。クリックごとにvar iをインクリメントし、その値を動的に生成されたtextboxes.Anyアイデアは高く評価されます。

$("#btnExport").after(s); 
var i = 0; 
$('#btnASize').click(function() { 
    i += 1; 
    var sizerangeMin = "<input type='text' ID='SizeMin''+i+' value='2.00' />"; 
    var ToleranceMin = "<input type='text' ID='TolMin'+i value='1' />"; 
    var ToleranceMax = "<input type='text' ID='TolMax'+i value='1' />"; 
    var markup = "<tr><td>" + sizerangeMin + "</td><td>" + ToleranceMin + "</td><td>" + ToleranceMax + "</td></tr>"; 
    $("#WireDimTbl tbody").append(markup); 
}); 

しかし、このコードでは、my変数の値は表示されません。

Answer 1

理由は、文字列の中に変数を含めることです。

正しいコードは次のようになります。また、

var sizerangeMin = "<input type='text' ID='SizeMin'" + i + " value='2.00' />"; 
var ToleranceMin = "<input type='text' ID='TolMin'" + i + " value='1' />"; 
var ToleranceMax = "<input type='text' ID='TolMax'"+ i + "value='1' />"; 

、お使いのブラウザはES6をサポートしている場合は、Template Literalsを使用することができます。

この場合、変数を連結なしで直接文字列内で使用できます。

var age = 25; 

var ageStr = `I am ${age} years old.` 

Answer 2

以下の例のように動的IDを追加できます。

var sizerangeMin = "<input type='text' ID='SizeMin'"+i+" value='2.00' />"