一次只能使用jQuery更改文本的字体系列

Question

我在使用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());
});

问题是我只能更改一次字体。 但是，当我尝试为第二，第三，第四等选择不同的字体系列时，字体不再明显改变。 但是，当我检查元素时，我可以看到该文本的字体系列样式确实已被更改...但是这些更改未反映在屏幕上...我基本上具有与字体颜色完全相同的代码这似乎很好。

Answer 1

您的问题是使用“ 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）。，即使侦听器注册时元素不存在，您也可以侦听元素中的更改。

小提琴： https : //jsfiddle.net/nebulousal/jvk0t2x8/

Answer 2

请看一下代码

当我尝试使用全球通用的基本字体时，它可以正常工作

<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());
});

谢谢

Answer 3

我已经对您的代码进行了很少的修改（ 更改字体名称 ），并且工作正常。

<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());
    });