2013-01-25 3 views
1

웹 페이지의 다른 목록에서 동적으로 이동할 수있는 여러 가지 MathJax 수식이 있습니다. JQuery 및 append 특성을 사용하여이를 제어하려고합니다.JQuery의 MathJax

내 스크립트 파일에는 다양한 수식 배열이 있고 .append를 사용하여 지정된 div 안에 배열의 수식을 나열하는 함수가 있습니다. 여기 코드는 :이 스크립트가 실행 등 첨부 된 공식 텍에 표시되지 않습니다 전에 MathJax이 수학을 식자 문제를 데

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

.

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

사람이에 대한 좋은 수정을 알고 있나요 예를 들면 다음과 같습니다 바이올린은? 나는 MathJax를 다시 typesetting에 대한 설명서의 일부를 읽으려고했지만, 나는 그것을 실제로 따르지 않는다.

답변

1

:

다음은 테스트 페이지입니다. 첫째, 수학 표현식 배열은 자바 스크립트 문자열에서 이스케이프 문자로 사용되기 때문에 백 슬래시를 잃어 버립니다. 당신은 그들을 두 번해야 당신이 페이지에 추가 한

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

둘째, 당신은 수학을 처리 할 MathJax 말할 필요가있다. 이를 수행하기 위해 수학을 첨부 한 후

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

을 사용하십시오.

Version 120 당신의 바이올린은 작동 버전을 보여줍니다.

0

필자의 바이올린의 93/94,/95 업데이트로 일부 테스트를 실행했는데 렌더링 된 수식을 이동할 수 있지만 전체가 깨지기 쉬운 것으로 나타났습니다. 때로는 단순한 변경이나 페이지 새로 고침으로 인해 렌더링되지 않은 수식이 표시되고, 각 수식이 두 배로 늘어났습니다. 설명 할 수 없습니다.

여러분도 알다시피, 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> 
+0

미래의 메모 : cdn.mathjax.org의 수명이 다해 가고 있습니다. https://www.mathjax.org/cdn-shutting-down에서 마이그레이션 팁을 확인하십시오. (향후 독자를 위해 게시물을 업데이트 할 수도 있습니다.)). –