Рендеринг MathJax обновлен с помощью .html()

Пример jsfiddle: https://jsfiddle.net/3qu846tu/

Я пытаюсь обновить MathJax-math с помощью .html(), однако, похоже, мой код не работает. Мой текущий код выглядит примерно так, но он выводит "1 + 2 = 3" un:

$$\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() - reset:

<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') может быть изменен несколько раз, а не только один раз.

Ответы

Ответ 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 в этом примере), чтобы записать значения, а затем вы можете вставлять значения текстовых полей непосредственно в формулу.

Надеюсь, это поможет!