html - JQueryを使用してオプション値をスタイルタグ値として設定する

この質問にはすでに答えがあります: JavaScript 文字列に変数を挿入するにはどうすればよいですか?

(答えは4つ)

3 年前

に閉店しました。

私は jQuery については比較的初心者で、インライン スタイルとして「previewtext」クラスのフォント サイズ値として取り込むオプション値を取得しようとしています。

私のコードは、8p などの設定値であれば正常に動作します。x ですが、それを変数として指定しても、何も起こりません。

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

ご協力いただければ幸いです。

-ジョーダン

これを試してください。 .css({"font-size": + fontSize +"px"});

– レイズ AC

2020 年 9 月 4 日 4:30

------------------------

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

ジョーダンさん、このコードを使ってもう一度試してみてください。

1

1

これは機能しますが、文字列の連結をテンプレート リテラルで処理します

– 

user13808929

2020 年 9 月 3 日 21:43

------------------------

問題は文字列の連結にあります。 1 つのアプローチは、以下に示すようにテンプレート リテラルを変更して使用することです。

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