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

Question

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

<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(
    ....

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

Answer 1

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

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

希望对您有所帮助。

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