3

我有许多不同的 MathJax 公式，它们将在网页上的不同列表中动态移动。我正在尝试使用 JQuery 和 append 属性来控制它。

在我的脚本文件中，我有各种公式数组，然后是一个函数，它使用 .append 列出指定 div 内的数组中的公式。这是代码：

function listArray(array,div){
  for(var i=0; i<array.length; i++){
    $('#'+div).append('<li>'+array[i]); 
  }
};

我遇到的问题是 MathJax 在此脚本运行之前对数学进行排版，因此附加的公式不会在 TeX 中显示。这是一个示例小提琴：

http://jsfiddle.net/T8m64/92/

有谁知道一个很好的解决方法？我已经尝试阅读一些关于重新排版 MathJax 的文档，但我并没有真正遵循它。

4

2 回答 2

3

您的小提琴示例有两个问题。首先，数学表达式数组丢失了反斜杠，因为它们在 javascript 字符串中用作转义字符。您需要将它们加倍：

var jax = ['\\(\\mathbb{Q}\\)','\\(\\mathbb{Z}\\)'];

其次，您需要告诉 MathJax 在将数学添加到页面后对其进行处理。采用

MathJax.Hub.Queue(["Typeset",MathJax.Hub,div]);

在附加数学以做到这一点之后。

你的小提琴版本 120显示了一个工作版本。

于 2013-01-26T20:42:48.650 回答
0

我运行了一些测试作为你的小提琴的更新/93、/94、/95，发现渲染的公式可以移动，但整个东西很脆弱。有时一个简单的更改或只是页面刷新会导致显示未渲染的公式，每个公式都加倍，我无法解释。

正如您将看到的，我认为 asetTimeout可以解决问题，但现在我认为情况并非如此。

我认为该错误只是在 jsFiddle 中运行代码的一个功能。在我自己的计算机上以 file:// 协议在本地提供的测试页面中运行代码并在 Opera 中查看时，我无法引发该错误。

这是我的测试页面：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test kineticJS lib - jsFiddle demo</title>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>

<style type='text/css'>
    body {
    margin: 10px;
}
.jax {
    display: none;
}
#list1, #list2 {
    margin: 10px 0;
    padding: 5px;
    border: 1px solid #000;
}
</style>

<script type='text/javascript'>
$(window).load(function(){
function listArray($ul) {
    $(".jax").each(function(i, j){
        var li = $("<li/>").append($(j).text());
        $ul.append(li);
    });
};

//move formulas from original spans into list1
listArray($("#list1") );

//on click move formulas between list1 and list2
$("#moveUp").on('click', function() {
    $("#list2 li").eq(0).appendTo($("#list1"));
});
$("#moveDown").on('click', function() {
    $("#list1 li").eq(0).appendTo($("#list2"));
});

});
</script>


</head>
<body>
  <head>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
    <span class="jax">\(\mathbb{Q}\)</span>
    <span class="jax">\(\mathbb{Z}\)</span>
    <ul id="list1"></ul>
    <button id="moveDown">Move Down</button>
    <button id="moveUp">Move Up</button>
    <ul id="list2"></ul>
</body>

</body>
</html>
于 2013-01-25T04:16:34.023 回答