[英]Can only change font-family of text with jQuery once
I am having trouble changing the font-family of my text with jQuery. 我在使用jQuery更改文本字体时遇到麻烦。
My html: 我的html:
<select id="message-font-selection" class="promo">
<option value="Oswald">Oswald</option>
<option value="Open Sans">Open Sans</option>
<option value="Montserrat">Montserrat</option>
<option value="Indie Flower">Indie Flower</option>
<option value="Poiret One">Poiret One</option>
</select>
<div class="middle-section">{{middle_msg}}</div>
My js: 我的js:
$('#message-font-selection').change(function() {
$('.middle-section').css('font-family',$(this).val());
});
The problem is that I can only change the font once. 问题是我只能更改一次字体。 However, when I try selecting a different font-family for the 2nd, 3rd, 4th, etc... time, the font no longer visibly changes.
但是,当我尝试为第二,第三,第四等选择不同的字体系列时,字体不再明显改变。 However, when I inspect the element, I can see that the font-family style for that text is indeed being changed... but those changes are not reflected on the screen... I have basically the same exact code for font-color and that seems to work just fine.
但是,当我检查元素时,我可以看到该文本的字体系列样式确实已被更改...但是这些更改未反映在屏幕上...我基本上具有与字体颜色完全相同的代码这似乎很好。
Your issue is with the use of "this": 您的问题是使用“ this”:
$(document).on('change', $('#message-font-selection'), function() {
alert('The value of $(this).val() is: ' + $(this).val() );
$('.middle-section').css('font-family',$('#message-font-selection').val());
});
As you can see, replacing "$(this).val()" with a reference to the actual element fixes the issue. 如您所见,用对实际元素的引用替换“ $(this).val()”可解决此问题。
Also, by using $(document).on listener, you can listen for a change in the element even if it doesn't exist when the listener is registered. 另外,通过在侦听器上使用$(document)。,即使侦听器注册时元素不存在,您也可以侦听元素中的更改。
Fiddle: https://jsfiddle.net/nebulousal/jvk0t2x8/ 小提琴: https : //jsfiddle.net/nebulousal/jvk0t2x8/
Please have a look at code, 请看一下代码
it is working when i tried with the basic fonts which are available globally, 当我尝试使用全球通用的基本字体时,它可以正常工作
<select id="message-font-selection" class="promo">
<option value="arial">arial</option>
<option value="times new roman">times new roman</option>
<option value="calibri">calibri</option>
</select><br><br><br><br>
<div class="middle-section">This is test</div>
$('#message-font-selection').change(function() {
$('.middle-section').css('font-family',$(this).val());
});
Thanks 谢谢
I have tested your code with little modification( Change on font name ) and it's working fine. 我已经对您的代码进行了很少的修改( 更改字体名称 ),并且工作正常。
<select id="message-font-selection" class="promo">
<option value="Oswald">Oswald</option>
<option value="fantasy">fantasy</option>
<option value="monospace">monospace</option>
<option value="cursive">cursive</option>
<option value="Poiret One">Poiret One</option>
</select>
<div class="middle-section">Test</div>
JS JS
$('#message-font-selection').change(function() {
$('.middle-section').css('font-family',$(this).val());
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.