jQuery实现选中字体复选框为输入框添加对应class的问题排查

脚本失效核心原因 #

• 你写的判断逻辑只在脚本加载的时候跑了一次，没有绑定到字体选择的操作事件上，后续你切换复选框的时候这段代码根本不会重新执行，自然不会修改输入区域的类。
• 用nth-child按位置匹配字体的写法容错性很差，要是之后调整了字体选项的顺序，整个匹配逻辑就直接错了。
• 重复写相同的选择器、反复增删类的写法冗余太高，很容易出拼写错误，后续维护也麻烦。

修复后的可运行代码 #

你可以直接用下面的代码替换原有脚本，逻辑更精简也更稳定：

// 提前缓存要操作的DOM元素，避免重复查询提升性能
const $inputTextArea = jQuery(".ppom-field-wrapper.input_text > .form-group");
// 按你之前的字体顺序维护类名数组，后续调整顺序只需要改这个数组就行
const fontClassList = ['arial', 'comic', 'georgia', 'impact', 'trebuchet', 'verdana'];

// 绑定点击事件到所有字体选项上，每次选择字体都会触发逻辑
jQuery(".ppom-field-wrapper.font_family .form-check").on('click', function() {
    // 先移除所有已添加的字体类
    $inputTextArea.removeClass(fontClassList.join(' '));
    // 找到当前被选中的字体选项
    const $selectedFont = jQuery(".ppom-field-wrapper.font_family .form-check.selected");
    if (!$selectedFont.length) return;
    // 按位置匹配对应字体类，因为你之前nth-child从2开始对应第一个字体，所以索引减1
    const fontIndex = $selectedFont.index() - 1;
    if (fontClassList[fontIndex]) {
        $inputTextArea.addClass(fontClassList[fontIndex]);
    }
})

如果你的字体选项的value属性、或者对应显示的标签文本本身就和字体类名一致，还可以进一步去掉数组映射的逻辑，直接从选中的选项里取类名，完全不用关联位置，稳定性更高。

内容的提问来源于stack exchange，提问作者Jituu