使用 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 图例”变为“新字段 2 图例”时更改为“1”或“2”，然后如果 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>

Answer 2

添加您的代码，如下所示

$(function(){	
	
	$('#field1').change(function(){
		if($.inArray($(this).val(), ['1','2']) >= 0){			
			$('#field2_div').children().find('legend').text('New Field 2 Legend');
		}else{
			$('#field2_div').children().find('legend').text('Default Field 2 Legend');
		}
	});
	
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/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>

Answer 3

这是我在表单中动态更改值的方法。 我给你留下了一些工作来根据你的喜好定制它。

<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>

<script>
    function formChanger(inputValue) {
        switch (inputValue) {
            case '1':
                // do something for selection 1
                console.log('selected 1');
                break;
            case '2':
                // do something for selection 2
                console.log('selected 2');
                break;
            case '3':
                // do something for selection 2
                console.log('selected 3');
                break;
            case '4':
                // do something for selection 2
                console.log('selected 4');
                break;
            default :
                // Probably want to remove any of the first 4 options that may have been implemented already.
                return null;
        }
    }
    $('#field1').change(function(){
        formChanger($(this).val());

    });
</script>