jquery - 如何将值存储在可验证的变量中并获取更改函数的值？

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>

标签： jqueryvariablesglobal-variables

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>