2013-01-25 35 views
1

我有很多不同的MathJax公式可以在网页上的不同列表中动态移动。我试图用JQuery和append属性来控制它。jQuery中的MathJax

在我的脚本文件中,我有各种公式数组,然后是一个函数,它使用.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的文档,但我并没有真正遵循它。

回答

1

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

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

其次,您需要告诉MathJax在您将数学添加到页面后处理数学。使用

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

在追加数学为了做那。

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

0

我跑了一些测试作为更新/ 93,/ 94,/ 95你的小提琴,发现渲染的公式可以移动,但整个事情是脆弱的。有时候一个简单的改变或只是一个页面刷新会导致未呈现的公式显示,每一个都翻倍,这是我无法解释的。如你所见,我认为setTimeout会解决问题,但现在我不认为是这样。

我认为这个bug只是在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> 
+0

来自未来的说明:cdn.mathjax.org即将结束其生命周期,请查看https://www.mathjax.org/cdn-shutting-down获取迁移提示(也许可以为将来的读者更新您的文章)。 –