3

Web ページ上のさまざまなリストを動的に移動するさまざまな 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

0

フィドルの /93、/94、/95 の更新としていくつかのテストを実行したところ、レンダリングされた数式は移動できるものの、全体が脆弱であることがわかりました。単純な変更またはページの更新だけで、レンダリングされていない数式が表示され、それぞれが 2 倍になって表示されることがありますが、これについては説明できません。

ご覧のとおり、setTimeout問題は解決すると思いましたが、今はそうではないと思います。

このバグは、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 に答える