Question

我为网站实现了MathJax，我想要实现的是将文本区域缩短到一定长度并使其可点击，然后在点击时加载更多。 MathJax加载截断的文本就好了，但是当我单击文本将其展开到整个段落时，MathJax会将初始缩短的数学追加到新渲染的整个段落的末尾。有人对这个有经验么？我假设它正在发生，因为截断的文本仍然在队列中，因此它仍然在加载整个文本后打印它，但我似乎无法弄清楚如何清除队列中的队列缩短文本以使其到达好好工作。任何帮助/建议将不胜感激！

以下是我的代码的基础知识：

var showOnClick = function() {
        ctrl.showAll(!ctrl.showAll());
};

MathJax.Hub.Queue(['Typeset', MathJax.Hub]);
return m('p.readable.pointer', {onclick: showOnClick},
          ctrl.showAll() ? result.description : description_truncated);

Answer 1

我认为主要原因是您已经拥有包含公式部分的所有跨度，并且当您添加文本时，引擎会尝试将文本字段的所有内容作为源并重新格式化。由于跨度看起来不像数学源，它会丢弃它们（这只是一个猜测，但看起来像这样工作）。

我的解决方案：不是直接添加一些文本，而是添加新的范围，只在此范围内重新生成公式。要小心：如果你要添加的文字是这样剪切的，它就不会起作用：[＆＃34;我的超级公式：$ x \ subset＆＃34;，＆＃34; \ mathbb {R} $。＆＃34;。]

所以，这是我的简化示例（请注意，我使用id＆＃34; txt2＆＃34;刷新范围）：

＆＃13;

<head>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});

  function addText() {
    document.getElementById('txt').innerHTML += '<span id=txt2> ...adding new formula: $x\\subseteq X$</span>';
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,"txt2"]);
  }
</script>
<script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
</script>
</head>
<body>
  <div id=txt>$1\neq 0$</div>
  <input type=button onclick="addText()" value="Do it"/>
</body>

＆＃13;

Answer 2

您的原始帖子未显示您是如何在段落中添加其他文字的，但如果您在答案中使用了innerHTML += ...，则可能是您重复数学的来源。通过执行此操作，您将删除当前DOM并将其替换为新的DOM，从旧的DOM复制，但与其不同。特别是，你丢失了MathJax与旧DOM一起存储的值，记录了已处理的内容，因此当你要求MathJax再次排版页面时，看起来所有数学都是新的，所以它再次排版，引入一个将排版数学的第二个副本复制到文档中。

虽然您当前的版本确实避免了重复，但它仍然丢失了从复制的DOM到MathJax的所有连接。例如，上下文菜单将不再适用于较旧的数学表达式，因为尚未通过设置innerHTML来复制处理该表达式的代码。所以这不是一个好的方法。

相反，您可以尝试

document.getElementById('txt')
        .appendChild(document.createTextNode('...adding new formula: $x\\subseteq X$'));

不会改变现有的DOM，只是添加一个新的文本节点。然后，您可以再次排版页面而不会重复。

使用MathJax时截断时出现奇怪的行为

2 个答案: