Javascript 只要组件变量值更改jQuery，输入文本就会更改

当元素A、B或C更改时，它们会更改

filename.A

、

filename.B

等的属性

但输入值只指定一次。当组成输入文本值的变量发生变化时，是否有办法使输入文本值发生变化

或者我必须更新每个

更改

函数中的文本。我必须在

$（“#filename”）.val（filename.a+“”+filename.b+“”+filename.c）中放入类似的内容

以下操作不起作用，因为输入文本没有“绑定”到变量，只分配了一次

<input type="text" id="filename" />
<script>
$("#elementA").on("change",function() {
  filename.a = $(this).text();
});
$("#elementB").on("change",function() {
  filename.b = $(this).text();
});
$("#elementC").on("change",function() {
  filename.c = $(this).text();
});
$("#filename").val(filename.a + " " + filename.b + " " + filename.c);
</script>


$（“#elementA”）。关于（“更改”，函数（）{
filename.a=$（this.text（）；
});
$（“#elementB”）。关于（“更改”，函数（）{
filename.b=$（this.text（）；
});
$（“#elementC”）。关于（“更改”，函数（）{
filename.c=$（this.text（）；
});
$（“#filename”）.val（filename.a+“”+filename.b+“”+filename.c）；

您可以在所有输入上只使用一个事件处理程序，并根据更改的输入更改filename对象的值

然后仅在更改事件处理程序中更新
#filename
的值

更新：
您可以做的另一件事是动态计算属性的名称

$("#elementA, #elementB, #elementC").on("change",function() {

  var val = $(this).text();

  var id = this.id; // Will have 'elementA'
  var prop = id.replace("element", "").toLowerCase(); // Will have 'a'

  filename[prop] = val;

  $("#filename").val(filename.a + " " + filename.b + " " + filename.c);

});

您可以在所有输入上只使用一个事件处理程序，并根据更改的输入更改filename对象的值

然后仅在更改事件处理程序中更新
#filename
的值

更新：
您可以做的另一件事是动态计算属性的名称

$("#elementA, #elementB, #elementC").on("change",function() {

  var val = $(this).text();

  var id = this.id; // Will have 'elementA'
  var prop = id.replace("element", "").toLowerCase(); // Will have 'a'

  filename[prop] = val;

  $("#filename").val(filename.a + " " + filename.b + " " + filename.c);

});

试试下面的代码

<script>
  function assignValue(){
      $("#filename").val($("#elementA").text() + " " + $("#elementB").text() + " " + $("#elementC").text());
  }


  $(function(){
    $('#elementA, #elementB, #elementC').on('change', function(){
      assignValue();
    });
  });
</script>


函数赋值（）{
$（“#filename”）.val（$（“#elementA”）.text（）+“”+$（“#elementB”）.text（）+“”+$（“#elementC”）.text（）；
}
$（函数（）{
$（'#elementA，#elementB，#elementC'）。on（'change'，function（）{
赋值（）；
});
});
尝试下面的代码

<script>
  function assignValue(){
      $("#filename").val($("#elementA").text() + " " + $("#elementB").text() + " " + $("#elementC").text());
  }


  $(function(){
    $('#elementA, #elementB, #elementC').on('change', function(){
      assignValue();
    });
  });
</script>


函数赋值（）{
$（“#filename”）.val（$（“#elementA”）.text（）+“”+$（“#elementB”）.text（）+“”+$（“#elementC”）.text（）；
}
$（函数（）{
$（'#elementA，#elementB，#elementC'）。on（'change'，function（）{
赋值（）；
});
});
只需给所有
元素
一个类，这样就有一个事件监听器来监听该类元素的所有更改/键控

然后，您可以选择是在键入密钥标记时填充文件名（即：
keyup（）
），还是在离开文本框后填充文件名（即：`.change（））

在下面的代码片段中，我更喜欢
.keyup（）
，因为它在上下文中更有意义


$（'.elements'）.keyup（函数（）{
//如果需要，可以使用[$（）.change（）]而不是[$（）.keyup（）]
var a=$（'#elementA'）.val（）；
var b=$（'#elementB'）.val（）；
var c=$（'#elementC'）.val（）；
$（'#filename'）.val（a+''+b+''+c）；
});






结果
只需给所有
元素
一个类，这样就有一个事件监听器来监听该类元素的所有更改/键控

然后，您可以选择是在键入密钥标记时填充文件名（即：
keyup（）
），还是在离开文本框后填充文件名（即：`.change（））

在下面的代码片段中，我更喜欢
.keyup（）
，因为它在上下文中更有意义


$（'.elements'）.keyup（函数（）{
//如果需要，可以使用[$（）.change（）]而不是[$（）.keyup（）]
var a=$（'#elementA'）.val（）；
var b=$（'#elementB'）.val（）；
var c=$（'#elementC'）.val（）；
$（'#filename'）.val（a+''+b+''+c）；
});






结果
设置值，即
$（“#文件名”）.val（…）change
event handler中的code>我有3个事件处理程序。我的问题是，我必须将其放入3个或更多事件处理程序中，并在3个位置进行更改。是否有其他方法？设置值，即
$（“#filename”）.val（…）change
event handler中的code>我有3个事件处理程序。我的问题是，我必须将其放入3个或更多事件处理程序中，并在3个位置进行更改。还有其他方法吗？我需要检查
$（this）
是什么还是我可以只做：
filename.a=$（“#elementA”）.text（）；filename.b=$（“#elementB”）.text（）等？也就是说，每次任何选择器更改时，我都会更新所有3个对象属性。@但是，你可以这样做，但在这种情况下，你会不必要地覆盖2个属性值。我不认为覆盖属性值会占用很高的资源，是吗？您的更新很有趣，但不幸的是，
elementA
等只是为了回答这个问题。事实上，他们有非常不同的名字。@ButtleButkus哦，好的。是的，他们不是。您可以这样做：）我需要检查
$（this）
是什么，还是我可以这样做：
filename.a=$（“#elementA”）.text（）；filename.b=$（“#elementB”）.text（）等？也就是说，每次任何选择器更改时，我都会更新所有3个对象属性。@但是，你可以这样做，但在这种情况下，你会不必要地覆盖2个属性值。我不认为覆盖属性值会占用很高的资源，是吗？您的更新很有趣，但不幸的是，
elementA
等只是为了回答这个问题。事实上，他们有非常不同的名字。@ButtleButkus哦，好的。是的，他们不是。您可以这样做：）无论是像这样的分组选择器
$（'elementA，'elementB，'elementC'）
还是使用类
$（'elements'）
，您的答案都是最简单、最容易阅读的。我最后增加了一个类。但是你不认为使用
$（'.elements'）比使用
$（'.elements'）更好吗？在我的情况下，我认为我绝对必须这样做，因为目标元素是动态添加的，从页面中删除的。如果它们是动态添加的，那么使用
$（文档）。在（'keyup'，'.elements'，函数（）{/*您的代码在这里*/}