[英]Can only change font-family of text with jQuery once
我在使用jQuery更改文本字體時遇到麻煩。
我的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>
我的js:
$('#message-font-selection').change(function() {
$('.middle-section').css('font-family',$(this).val());
});
問題是我只能更改一次字體。 但是,當我嘗試為第二,第三,第四等選擇不同的字體系列時,字體不再明顯改變。 但是,當我檢查元素時,我可以看到該文本的字體系列樣式確實已被更改...但是這些更改未反映在屏幕上...我基本上具有與字體顏色完全相同的代碼這似乎很好。
您的問題是使用“ 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());
});
如您所見,用對實際元素的引用替換“ $(this).val()”可解決此問題。
另外,通過在偵聽器上使用$(document)。,即使偵聽器注冊時元素不存在,您也可以偵聽元素中的更改。
請看一下代碼
當我嘗試使用全球通用的基本字體時,它可以正常工作
<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());
});
謝謝
我已經對您的代碼進行了很少的修改( 更改字體名稱 ),並且工作正常。
<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
$('#message-font-selection').change(function() {
$('.middle-section').css('font-family',$(this).val());
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.