Question

我想动态更新字体大小，所以我创建了这段代码，但问题是它无法正常工作。

var font_size = 36;
$('#content').on('click', function(){

  $('#editor').css('display', 'block');

  var numbersValue = "<input type=\"number\" id=\"input-fz\" value="+font_size+">";


var currentValue = $(numbersValue).prop('value');
  var eleId = $(numbersValue).prop('id');
     $(eleId).change(function(event) {
      /* Act on the event */
      newValue = $(this).val();
      newvalueFonts = newValue;
      $('h1').css('font-size', newvalueFonts);
    });

$('#result').html(numbersValue)

})

Here is my fiddle

Answer 1

可能需要进行三项更改

使用#作为ID选择器;
将事件从body委托给input元素。
添加像px这样的单位作为font-size

var font_size = 36;
$('#content').on('click', function() {

  $('#editor').css('display', 'block');

  var numbersValue = "<input type=\"number\" id=\"input-fz\" value=" + font_size + ">";

  var currentValue = $(numbersValue).prop('value');

  var eleId = $(numbersValue).prop('id');
   // Implementing point 1,2
  $('body').on('change', '#' + eleId, function(event) {

    /* Act on the event */
    newValue = $(this).val();
    newvalueFonts = newValue;
     // implementing point 3
    $('h1').css('font-size', newvalueFonts + 'px');
  });

  $('#result').html(numbersValue)

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="content">
  Some Content Here
</h1>

<div id="editor" style="display:none">
  <div id="result"></div>
</div>

Answer 2

您的ID选择器错误，您遗漏了#

$(eleId)应为$('#'+eleId)

另请注意，您应该将+'px'作为font-size

的单位传递

当您使用ID选择器访问该元素时，DOM中不存在元素，在使用html()

访问元素之前使用jQuery方法

＆＃13;

var font_size = 36;
$('#content').on('click', function() {
  $('#editor').css('display', 'block');
  var numbersValue = "<input type=\"number\" id=\"input-fz\" value=" + font_size + ">";
  var currentValue = $(numbersValue).prop('value');
  var eleId = $(numbersValue).prop('id');
  $('#result').html(numbersValue);
  $('#' + eleId).change(function(event) {
    var newValue = $(this).val();
    $('h1').css('font-size', newValue + 'px');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1 id="content">
  Some Contetn Here
</h1>

<div id="editor" style="display:none">
  <div id="result"></div>
</div>

＆＃13;

Answer 3

＆安培;如果可能，您可以切换模板化元素。

<h1 id="content">
  Some Content Here
</h1>

<div id="editor" style="display:none">
    <input type="number" id="input-fz">
</div>

<script>
var font_size = 36;
$('#content').on('click', function(){

    $('#editor').css('display', 'block');
    $('#input-fz').val(font_size);

    $('#input-fz').change(function(event) {
      /* Act on the event */
      newValue = $(this).val().toString()+'px';
      $('h1').css('font-size', newValue);
    });

});
</script>

Answer 4

你的选择器错了。它应该是$('#' + eleId)而不是$(eleId)。您还必须在px之类的字体大小之后添加$('h1').css('font-size', newvalueFonts + 'px')。更新了您的脚本。

＆＃13;

var font_size = 36;
$('#content').on('click', function(){

$('#editor').css('display', 'block');
var numbersValue = "<input type=\"number\" id=\"input-fz\" value="+font_size+">";

$('#result').html(numbersValue);

var currentValue = $(numbersValue).prop('value');
var eleId = $(numbersValue).prop('id');

 $('#' + eleId).change(function(event) { // Modified here
      /* Act on the event */
      newValue = $(this).val();

      newvalueFonts = newValue;
      $('h1').css('font-size', newvalueFonts + 'px'); // Modified here
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="content">
  Some Contetn Here
</h1>

<div id="editor" style="display:none">
    <div id="result"></div>
</div>

＆＃13;

Answer 5

用匹配的行替换现有代码

 $('#'+eleId).change(function(event) {
  /* Act on the event */
  newValue = $(this).val();
  newvalueFonts = newValue;
 // alert(newvalueFonts);
  $('h1').css('font-size', newvalueFonts+'px');

因为你没有提到选择器，你必须添加px wih字体大小，因为字体大小设置为像素

如何使用jquery动态更新字体大小？

5 个答案: