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

Can only change font-family of text with jQuery once

本文关键字：系列 字体 一次 文本 jQuery      更新时间：2023-09-26

我在使用 jQuery 更改文本的字体系列时遇到问题。

我的网页：

<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 等选择不同的字体系列时......时间，字体不再明显变化。但是，当我检查元素时，我可以看到该文本的字体系列样式确实正在更改......但这些变化并没有反映在屏幕上......我对字体颜色有基本相同的完全相同的代码，这似乎工作得很好。

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

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

请看一下代码，

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

<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());
    });
相关文章：