如何解决使用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。