使用JQuery将选项值设置为样式标签值

问题描述

我是jQuery的新手，我正尝试获取选项值以作为内嵌样式将'previewtext'类的字体大小值插入。

当我的代码是8px之类的设置值时，我的代码可以正常工作，但是当我希望将其作为变量时，什么也没发生。

<div class="textsize">
  <select class="form-control" name="fontSize">
      <option value="Size">Size</option>
      <option value="8">8</option>
      <option value="10">10</option>
      <option value="12">12</option>
      <option value="14">14</option>
      <option value="16">16</option>
      <option value="18">18</option>
      etc...
  </select>
</div>

<div class="previewtext">
    the quick brown fox jumps over the lazy dog 
</div>  

<script>
    $(document).ready(function() {
       $("select.form-control").change(function(){
           var fontSize = $(this).val();
           $("div.previewtext").css({"font-size": "fontSize"px});
       });
    });
</script>

任何帮助将不胜感激。

-乔丹

解决方法

$(document).ready(function() {
   $("select.form-control").change(function(){
       var fontSize = $(this).val();
       $("div.previewtext").css({"font-size": fontSize+"px"});
   });
});

乔丹，您可以尝试使用此代码。

,

问题在于字符串连接。一种方法是使用https://yadi.sk/i/yA4z4sJCt6fOog，如下所示：

....css({"font-size": "fontSize"px});

收件人：

....css({"font-size": `${fontSize}px`});

演示

$(document).ready(function() {
       $("select.form-control").change(function(){
           var fontSize = $(this).val();
           $("div.previewtext").css({"font-size": `${fontSize}px`});
       });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="textsize">
  <select class="form-control" name="fontSize">
      <option value="Size">Size</option>
      <option value="8">8</option>
      <option value="10">10</option>
      <option value="12">12</option>
      <option value="14">14</option>
      <option value="16">16</option>
      <option value="18">18</option>
      etc...
  </select>
</div>

<div class="previewtext">
    the quick brown fox jumps over the lazy dog 
</div>