javascript - 自定义字体选择器只改变一次字体

标签 javascript jquery css user-interface

我很茫然,我试图让用户选择某些文本输出的字体系列。代码基本上可以归结为:

<div id='output'>
    The quick brown fox jumps over the lazy dog
</div>
<select id='font-select'>
    <option value='Lucida Console'>Lucida Console</option>
    <option value='Courier New'>Courier New</option>
    <option value='Consolas'>Consolas</option>
</select>

使用 jquery 如下:

$(document).ready(
function()
{
    $('font-select').on( 'change',
        function()
        {
            $('output').css( 'font-family', $('#font-select').val() );
            console.log( 'Font changed' );
        });
});

我知道每次选择不同的字体时都会触发 on-change 事件,但 div 中的字体只会在我第一次选择时发生变化。之后,我仍然在控制台中收到“字体已更改”通知,但#output div 没有实际更改。

我试过把它改成

$(document).on( 'change', '#font-select',
    ....

我也尝试过将 id 更改为类并通过类进行选择

$('.font-select').change(
    ....

同样的结果。有人有什么建议吗?

最佳答案

问题与您使用的选择器有关。当您尝试通过 id 访问元素时,您应该在前面添加 #。

这里是 [fiddler][1],可以很好地解决您的问题

希望对您有所帮助。

[1]: https://jsfiddle.net/rajsnd08/nfh5craz/

关于javascript - 自定义字体选择器只改变一次字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45753629/

相关文章:

Javascript变量范围问题

html - 使用CSS在网页上定位对象

javascript - setTimeout() 只工作 2 次

javascript - JavaScript 中 Node Canvas loadImage 的异步等待问题

Javascript 使用 SheetJS 在服务器上读取 Excel 文件

c# - Jquery 拖放 - 无法拖回

javascript - 在div外点击,隐藏div

html - 计算从自动到像素的宽度,然后在 LESS CSS 中按像素添加

javascript - 如何设置 HandsOnTable 中每个单元格的背景颜色?

javascript - 如何在 JavaScript 中获取实例名称?