动态生成的font picker通过JS listener传递正确ID的问题求解

API 探路者

2026-10-1

问题根因

你当前的Font Picker逻辑有三处核心错误：

jQuery选择器缺失ID前缀#：$('quotetext'+(textcount))没有加#标识，无法正确选中对应ID的元素
闭包变量引用错误：动态生成的监听器直接引用了全局的textcount变量，事件触发时textcount已经是最终累加后的值，不是当前组件生成时对应的序号
没有仿照颜色选择器的逻辑，从触发元素的ID里提取对应序号，完全依赖全局变量导致ID匹配错误

修复方案

调整后的逻辑完全对齐颜色选择器的实现思路，从触发事件的元素属性中提取序号，避免依赖全局临时变量：

<div class="singlecontrol"><span style="vertical-align: middle;">Font Picker</span><input id="font"+textcount+"" type="text" autocomplete="off" ></div>

<script> 
$('#font'+(textcount))
    .fontselect()
    .on('change', function() {
        // 从当前触发事件的输入框ID提取对应序号，和颜色选择器逻辑完全一致
        const idSuffix = this.id.replace("font", "");
        applyFont(this.value, idSuffix);
    });

function applyFont(font, idSuffix) {
    console.log('You selected font: ' + font);
   
    // 将+号替换为CSS可识别的空格
    font = font.replace(/\+/g, ' ');
   
    // 拆分字体家族和字重
    font = font.split(':');
   
    var fontFamily = font[0];
    var fontWeight = font[1] || 400;
   
    // 补全ID选择器前缀#，使用传入的序号匹配对应文本元素
    $('#quotetext'+idSuffix).css({fontFamily:"'"+fontFamily+"'", fontWeight:fontWeight});
}
</script>