javascript - 使用 jQuery 迭代创建更改函数

Question

我的目标是能够向我制作的表单添加首选项...我创建了一个包含以下字段的对象数组，如下所示...

var preferences =[{
  base_field:"field1",
  base_value:"1",
  preference_type:"change",
  target_field:"field2_div legend",
  target_value:"New Field 2 Legend"
},
{
  base_field:"field1",
  base_value:"2",
  preference_type:"change",
  target_field:"field2_div legend",
  target_value:"New Field 2 Legend"
}];

$.each(preferences, function(key, preference){
  var baseField = $("#" + preference.base_field);
  var baseValue = preference.base_value;
  var targetField = $("#" + preference.target_field);
  var targetValue = preference.target_value;
  
  if (preference.preference_type == 'change') {
    var originalValue = targetField.text();
    baseField.change(function(){
      if(baseField.val() === baseValue){
        targetField.text(targetValue);
      }
      if(baseField.val() !== baseValue){
        targetField.text(originalValue);
      }
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="field1_div">
  <fieldset>
    <legend>Field 1 Legend</legend>
    <label for="field1">Field 1</label>
    <select id="field1" name="field1">
      <option value="" selected>Field 1</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </fieldset>
</div>
<div id="field2_div">
  <fieldset>
    <legend>Default Field 2 Legend</legend>
    <input id="field2" type="text" name="field2">
  </fieldset>
</div>

我希望当 #field1 的值从“默认字段 2 图例”更改为“1”或“2”时，“#field2_div 图例”的文本发生变化，然后如果 field1 发生变化为非“1”或“2”的值时，“#field2_div legend”的文本将恢复为“Default Field 2 Legend”

我的问题是只有当 field1 = "2"时最后一个更改函数才会保留...我认为这是因为更改函数被覆盖。关于如何重写它以获得更具可扩展性的方法有什么想法吗？

Answer 1

像这样解决了......谢谢@ADyson!

var preferences =[{
  base_field:"field1",
  base_value:["1","2"],
  preference_type:"change",
  target_field:"field2_div legend",
  target_value:"New Field 2 Legend"
}];

$.each(preferences, function(key, preference){
  var baseField = $("#" + preference.base_field);
  var baseValue = preference.base_value;
  var targetField = $("#" + preference.target_field);
  var targetValue = preference.target_value;
  
  if (preference.preference_type == 'change') {
    var originalValue = targetField.text();
    baseField.change(function(){
      if($.inArray(baseField.val(), baseValue) > -1){
        targetField.text(targetValue);
      } else{
        targetField.text(originalValue);
      }
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="field1_div">
  <fieldset>
    <legend>Field 1 Legend</legend>
    <label for="field1">Field 1</label>
    <select id="field1" name="field1">
      <option value="" selected>Field 1</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </fieldset>
</div>
<div id="field2_div">
  <fieldset>
    <legend>Default Field 2 Legend</legend>
    <input id="field2" type="text" name="field2">
  </fieldset>
</div>