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/

Answer 2

首先，我总是在你的案例使用中使用jquery中的正确选择器：

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

'＃'按ID选择。

第二个提示：

首先尝试删除font-family类，然后设置一个新类，有时当你将值设置为已有的属性时，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的正确（＃missing）。

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

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

3 个答案: