时间戳

首页 > 解决方案 > 使用 JQuery 将选项值设置为样式标记值

html - 使用 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>

任何帮助将不胜感激。

-约旦

标签： htmljquerycssinline-styles

解决方案

问题在于字符串连接。一种方法是通过更改来使用如下所示的模板文字：

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

推荐阅读