Как сохранить значения в проверяемом и получить значение при изменении функции?

Question

У меня есть список переменных, в которых хранятся различные значения, я использую эти переменные для проверки нескольких функций изменений, в настоящее время я должен объявлять переменную каждый раз, когда хочу проверить наличие изменений. Как я могу объявить их один раз, а затем получить доступ к их значению в нескольких функциях изменения.

jQuery('#fontWeight').on('change', function() {
	var getFontweight = jQuery('#fontWeight').val();
	jQuery(".preview").css('font-weight', getFontweight);
});
jQuery('#fontTransform').on('change', function() {
	var getFonttransform = jQuery('#fontTransform').val();
	jQuery(".preview").css('text-transform', getFonttransform);
});
jQuery('#fontWeight, #fontTransform').on('change', function() {
	var getFontweight = jQuery('#fontWeight').val();
	var getFonttransform = jQuery('#fontTransform').val();
	document.getElementById('g-code').innerHTML =
        '#text{\n'+
		'    font-weight: '+getFontweight+';\n'+
		'    text-transform: '+getFonttransform+';\n'+
        '}';
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="font-weight" id="fontWeight">
  <option value="normal">Normal</option>
  <option value="bold">Bold</option>
</select>
<select class="font-transform" id="fontTransform">
  <option value="none">Normal</option>
  <option value="uppercase">Uppercase</option>
  <option value="lowercase">Lowercase</option>
</select>
<div class="preview">Grumpy wizards make toxic brew for the evil Queen and Jack. </div>
<textarea id="g-code" onFocus="this.select()" onClick="this.focus();this.select()" readonly='readonly'></textarea>

Answer 1

Проблема в том, что вам не нужно несколько change обработчиков событий. Объедините их всех в один:

jQuery(function($) {
  $('#fontWeight, #fontTransform').on('change', function() {
    var fontWeight = $('#fontWeight').val();
    var fontTransform = $('#fontTransform').val();

    $(".preview").css({
      'font-weight': fontWeight,
      'text-transform': fontTransform
    });

    $('#g-code').html(`#text {\n  font-weight: ${fontWeight};\n  text-transform: ${fontTransform};\n}`);
  }).trigger('change');
  
  $('#g-code').on('focus click', e => e.target.select()); 
});

textarea {
  width: 400px;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="font-weight" id="fontWeight">
  <option value="normal">Normal</option>
  <option value="bold">Bold</option>
</select>
<select class="font-transform" id="fontTransform">
  <option value="none">Normal</option>
  <option value="uppercase">Uppercase</option>
  <option value="lowercase">Lowercase</option>
</select>

<div class="preview">Grumpy wizards make toxic brew for the evil Queen and Jack. </div>
<textarea id="g-code" readonly="true"></textarea>