使用 .html() 更新渲染 MathJax答案

【问题标题】：Rendering MathJax updated with .html()使用 .html() 更新渲染 MathJax
【发布时间】：2016-12-09 14:54:07
【问题描述】：

jsfiddle 示例：https://jsfiddle.net/3qu846tu/

我正在尝试通过 .html() 更新 MathJax-math，但是，我的代码似乎无法正常工作。我当前的代码看起来有点像这样，但它输出“1+2=3”unrendered:

$$\class{x}{2}+\class{y}{2}=\class{z}{5}$$
<script>
$( '.x' ).html( '1' );
$( '.y' ).html( '2' );
$( '.z' ).html( '3' );
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
</script>

我尝试了不同的命令，但似乎没有一个有效。 ["Rerender", MathJax.Hub] 只是渲染 "2+2=5"，所以看起来 .html() 被重置了：

<script>
MathJax.Hub.Queue(["Rerender",MathJax.Hub]);
</script>

想要的结果看起来有点像这样（省略 js），其中 \class{x}{} （和其他）可能在不同的地方出现不止一次：

<span>You have chosen \(\class{x}{}\) and \(\class{y}{}\)</span>
$$\class{x}{}+\class{y}{}=\class{z}{}$$

有没有办法以这种方式呈现“1+2=3”？ $( '.x' ) 可以更改多次，而不仅仅是一次。

【问题讨论】：

您可能想尝试提供一个适当的示例。您的第一个代码块同时包含 DOM 内容（TeX 字符串）和 JavaScript 代码；这没有多大意义。我的猜测是您希望在运行 jquery 代码之前完成排版（否则这些类的任何地方都没有元素）。
再一次，一个使用 sn-ps 或 jsbin 的自包含示例来展示您目前所拥有的内容将是一个好主意。
这是您可能正在寻找的文档，但我仍然努力让事情作为页面上的单个元素工作（即使我使用 \cssId 而不是 \class。docs.mathjax.org/en/v2.5-latest/typeset.html跨度>
弗兰克，你应该从文陶尔到 MathJax 文档的链接开始；这是正确的起点。简而言之，您不能像这样更改 MathJax 的输出。相反，您需要修改输入并重新渲染它。由于您使用 LaTeX 输入，您所拥有的只是字符串，因此类似 DOM 的方法无法工作。您可能会发现将 MathML 作为 MathJax 的输入更容易（因为您可以使用一些 DOM 方法），但您仍然需要为应用程序逻辑中不断变化的输入进行记录。
未来注意事项：cdn.mathjax.org 即将结束生命周期，请查看mathjax.org/cdn-shutting-down 了解迁移提示。

标签： javascript jquery html mathjax

【解决方案1】：

弗兰克，使用以下代码：

HTML：

<html>
<head>

<script
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>
</head>
<body>

<div id="formula"></div>

A: <input type="text" id="valueA">
B: <input type="text" id="valueB">
C: <input type="text" id="valueC">

<p><input type="button" value="Update" onclick="DynamicMJ.update()" /></p>

<script>
var DynamicMJ = {
  formula: document.getElementById("formula"),

  update: function () {
    var a = document.getElementById("valueA").value;
        b = document.getElementById("valueB").value;
    var c = document.getElementById("valueC").value;
    var tex = "\\frac{"+a+"}{2}+ \\frac{"+b+"}{2} = \\frac{"+c+"}{5}";
    this.formula.innerHTML = "\\["+tex+"\\]";
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.formula]);
  }
};
DynamicMJ.update();
</script>

</body>
</html>

解释：

您需要使用 HTML 元素（本例中为 div）来写入值，然后您可以将文本框的值直接插入到公式中。

希望这会有所帮助！

【讨论】：

这很接近，但是变量可能出现在不同的div/span中，所以我想尽可能避免使用id，以避免为每个函数制作太多的函数。
我不能接受这个作为答案，因为它不完整，但我认为你应该得到赏金。你的回答仍然让我明白我该如何继续。
谢谢弗兰克，我很乐意提供帮助。也许如果你修改你的html，你可以找出正确的公式构造......
未来注意事项：cdn.mathjax.org 即将结束生命周期，请查看mathjax.org/cdn-shutting-down 了解迁移提示。