渲染MathJax以.html()
的jsfiddle例如更新:https://jsfiddle.net/3qu846tu/渲染MathJax以.html()
我试图通过的.html()的方式来更新MathJax,数学,但是,似乎我的代码不能正常工作。我当前的代码看起来有点像这一点,但它输出“1 + 2 = 3” 联合国呈现:
$$\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>
我试过不同的命令,但没有一个似乎工作。 [ “重新呈现”,MathJax.Hub]刚刚呈现 “2 + 2 = 5”,因此它似乎是html的()被复位:
<script>
MathJax.Hub.Queue(["Rerender",MathJax.Hub]);
</script>
的希望结果将看起来有点像这样(JS略) ,其中\类{X} {}(及其它)可以出现一次以上在不同的地方:
<span>You have chosen \(\class{x}{}\) and \(\class{y}{}\)</span>
$$\class{x}{}+\class{y}{}=\class{z}{}$$
有呈现 “1 + 2 = 3” 这样的任何方式? $('.x')可能会多次更改,而不仅仅是一次。
弗兰克,使用下面的代码:
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/spans中,所以如果可能的话,我想避免使用id,以避免为每个变量设置太多的函数。 –
我不能接受这个作为答案,因为它不完整,但我认为你应该得到赏金。你的回答仍然让我看到我可以继续。 –
谢谢弗兰克,我很乐意提供帮助。也许如果你修改你的html,你可以找出正确的公式构建... –
您可能想尝试提供一个正确的示例。您的第一个代码块包含DOM内容(TeX字符串)和JavaScript代码;这并没有多大意义。我的猜测是你想在运行jQuery代码之前进行排版(否则这些类没有任何元素)。 –
@PeterKrautzberger TeX字符串确实包含这些类的元素,而.html()确实替换了这些类中的符号;但是它是无条件的。重点是,一旦我尝试“重新渲染”,.html()被重置... –
再一次,使用snippets或jsbin显示目前为止的自包含示例将是一个好主意。 –