自定义字体选择器仅更改字体一次

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 中的字体仅在我第一次选择时更改。之后，我仍然在控制台中收到"字体更改"通知，但 #outputdiv 没有实际更改。

我试过将其更改为

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

我还尝试将 id 更改为类并通过类选择

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

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

Answer 1

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

这是[小提琴手][1]，它工作正常并解决了您的问题

希望对您有所帮助。

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

Answer 2

首先，在您的情况下，我将始终在 jquery 中使用正确的选择器：

$('#font-select').on('change', function() {
$('#output').css[....]
}

"#"按 id 选择。

第二个提示：

尝试先删除字体系列类，然后设置一个新类，有时 jQuery/html 会在您将值设置为现有属性时感到困惑(或者至少我感觉它确实:D ( 因此，请在"更改"函数中尝试这样的事情：

$('#output').css('font-family', ''); //this is basically standard but i dont like it...
$('#output').css( 'font-family', $('#font-select').val() );

Answer 3

你没有在jQuery中指定id的正确(#缺失(。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>