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

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

Answer 1

您的问题是使用＆＃34;此＆＃34;：

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

如您所见，替换＆＃34; $（this）.val（）＆＃34;通过引用实际元素来解决问题。

此外，通过使用$（document）.on侦听器，您可以侦听元素中的更改，即使在注册侦听器时它不存在。

小提琴：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());
    });

{j 44}只能用jQuery更改文本的字体系列

3 个答案: