如何使用 JQuery 应用的 CSS 类正确创建可编辑的“字体测试器”类型编辑器？

Question

我创建了一个网站来分享我设计的字体，并且我正在尝试合并一个“类型测试器”，以便人们在下载字体之前可以与它们进行交互。我已经在互联网上搜索了如何做到这一点，并且对于我的目的来说，预制的插件/解决方案大多看起来过于繁重（一个完整的类型编辑器）。可以在 Type Supply 的字体页面或 MyFonts 的任何字体页面上找到与我想要完成的示例类似的示例。

我想让用户能够：

1. 选择字体。
2. 选择字体大小。
3. 选择字体粗细/样式。

现在，I've come close to a working solution on my website，但它有一个奇怪的问题：样式在停止工作之前只能编辑几次。这特别奇怪，因为我能够拼凑出 a simpler version of the type editor on a JSFiddle，这似乎没有任何问题，可以无限更改样式。我正在处理的基本 HTML 是：

  <span contenteditable="true"> 
       <span class="fontselect fontsize fontweight textfield">Click here to try it!</span> 
  </span> 

三个选择菜单，类似这样：

  <select class="" data-native-menu="false" id="font-family-select" name="typeface"> 
       <option value="georgia" >Georgia</option> 
       <option value="couriernew">Courier New</option> 
       <option value="hevetica" selected="selected">Helvetica</option> 
  </select> 

...以及根据所选内容添加和删除 CSS 类的 JQuery。

你们中的任何人都可以找出我在实际网站上的版本做错了什么吗？对不起，如果问题很明显——很难知道我是否只是需要另一组眼球来了解我的语法，或者我的问题是否更大。

非常感谢您提供的任何帮助/建议/cmets！

Answer 1

我已经通过这种方式解决了。丑陋，但有效。

1. 创建changeStyle函数。
2. 将id="try"添加到span 点击这里试试吧！。

3. 添加到所有选择组合框onchange="changeStyle()"事件

   <script>
      function changeStyle(){
               family= $("#font-family-select").val();
               size=$("#font-size-select").val();
               weight=$("#font-weight-select").val();
   
               $("#try").removeClass().addClass("fontselect fontsize fontweight " + family + " " + size + " " + weight);
       } </script>
   

...

id="try" class="fontselect fontsize fontweight de 64 textfield">点击这里试试看！
...

onchange="changeStyle()"

onchange="changeStyle()"

onchange="changeStyle()"

...