字符串与jQuery连接时出现语法错误

Question

我想使用循环推送Javascript对象，并使用jQuery获取输入的值。

var data = {name: "Grace"};
$("#test").on('change', function () {

console.log($('"#test'+1+'T"').val());

for(var i=1; i<= 2; i++){
data['Thomas'+i+'Shelby'] = $('"#test'+i+'T"').val();
}
console.log(data);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="text" id="test1T">
<input type="text" id="test2T">
<input type="text" id="test">

语法错误，无法识别表达式:"#test1T">

**期望输出:**

如果用户在#test1T中输入Arthur，在#test2T中输入John，在#test中输入michael，

那么它应该控制台日志如下对象:

{
name: "Grace",
Thomas1Shelby: "Arthur",
Thomas2Shelby: "John",
}

Answer 1

查询选择器错误。不要把"放在里面。

将$('"#test'+i+'T"').val()
改为$('#test'+i+'T').val()

var data = {name: "Grace"};
$("#test").on('change', function () {

console.log($('#test'+1+'T').val());

for(var i=1; i<= 2; i++){
data['Thomas'+i+'Shelby'] = $('#test'+i+'T').val();
}
console.log(data);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="test1T">
<input type="text" id="test2T">
<input type="text" id="test">

Answer 2

引号问题。一个有效的ID选择器应该像

$('#test1T')或$('#test'+i+'T')

我建议使用模板文字

const data = {
name: "Grace"
};
$("#test").on('change', function() {
for (var i = 1; i <= 2; i++) {
data[`Thomas${i}Shelby`] = $(`#test${i}T`).val();
}
console.log(data);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="text" id="test1T">
<input type="text" id="test2T">
<input type="text" id="test">