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

Question

我对 jQuery 比较陌生，我正在尝试获取选项值作为内联样式 'previewtext' class 的字体大小值.

当它是一个设定值（例如 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>

如有任何帮助，我们将不胜感激。

-乔丹

Answer 1

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

嗨乔丹，你可以用这个代码再试一次。

Answer 2

问题与字符串连接有关。一种方法是使用 template literals，如下所示，方法是更改：

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

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

Setting an options value as a style tag value using JQuery

html

css

jquery

inline-styles