javascript - Mathjax 在处理时隐藏表达式

标签 javascript jquery mathjax

我读到MathJax: hide math expression while processing但这不是我期望的解决方案。我有一个 HTML 文件:

$(document).ready(function(){
  var data = {"questions":[{"date":"20170213","tssec":"1486970823","priority":"0","question":"{\"question_type\":\"single\",\"question\":\" Số điểm cực tiểu của hàm số $y = {x^4} - 2{{\\\\rm{x}}^2} + 100$ là:\",\"options\":[\" 1\",\" 3\",\" 2\",\" 0\"],\"correct\":[0]}","question_id":"5","ts":"14:27:30+00"},{"date":"20170213","tssec":"1486970823","priority":"0","question":"{\"question_type\":\"single\",\"question\":\" Giá trị lớn nhất M và giá trị nhỏ nhất m của hàm số $y = {x^3} - 3{x^2} + 3$ trên đoạn [0;3] là:\",\"options\":[\" M = 3 ; m = -1\",\" M = 0; m = 2\",\" M = 6; m = 1\",\" M = 3; m = 1\"],\"correct\":[0]}","question_id":"6","ts":"14:27:30+00"},{"date":"20170213","tssec":"1486970823","priority":"0","question":"{\"question_type\":\"single\",\"question\":\" Đồ thị hàm số $y = \\\\frac{{ - x + 2}}{{x - 1}}$ có các đường tiệm cận là:\",\"options\":[\" Tiệm cận đứng x = -1; tiệm cận ngang y = -1\",\" Tiệm cận đứng y = 1; tiệm cận ngang x = -1\",\" Tiệm cận đứng x = -1; tiệm cận ngang y = 1\",\" Tiệm cận đứng x = 1; tiệm cận ngang y = -1\"],\"correct\":[3]}","question_id":"7","ts":"14:27:30+00"},{"date":"20170213","tssec":"1486970823","priority":"0","question":"{\"question_type\":\"single\",\"question\":\" Hỏi hàm số y = $ - {x^3} + 3{x^2} + 9x$ nghịch biến trên khoảng nào?\",\"options\":[\" (-$\\\\infty $;3)\",\" (-1;3) \",\" ( -$\\\\infty $; -1) và ( 3; +$\\\\infty $) \",\" ( 3; +$\\\\infty $) \"],\"correct\":[1]}","question_id":"8","ts":"14:27:30+00"},{"date":"20170213","tssec":"1486970823","priority":"0","question":"{\"question_type\":\"single\",\"question\":\" Tìm tất cả các giá trị thực của tham số m để hàm số $y = - \\\\frac{1}{3}{x^3} + m{x^2} + mx - 2017$ nghịch biến trên R.\",\"options\":[\" ( -1; 0) \",\" [-1; 0] \",\" ( - $\\\\infty $; -1) $ \\\\cup $ (0; +$\\\\infty $) \",\" ( - $\\\\infty $; -1] $ \\\\cup $ [ 0; +$\\\\infty $) \"],\"correct\":[0]}","question_id":"9","ts":"14:27:30+00"},{"date":"20170213","tssec":"1486970823","priority":"0","question":"{\"question_type\":\"single\",\"question\":\" Tìm tất cả các giá trị thực của tham số m để hàm số của hàm số $y = \\\\frac{{2mx + 1}}{{m - x}}$ trên có giá trị lớn nhất trên đoạn [2; 3] là $ - \\\\frac{1}{3}$.\",\"options\":[\" 1 \",\" -5 \",\" – 2\",\" 0 \"],\"correct\":[3]}","question_id":"10","ts":"14:27:30+00"},{"date":"20170213","tssec":"1486970823","priority":"0","question":"{\"question_type\":\"single\",\"question\":\" Tìm các giá trị thực của tham số m để đường thẳng $\\\\left( d \\\\right):y = x + m - 1$ cắt đồ thị hàm số $y=\\\\frac{2x+1}{x+1}$ tại 2 điểm phân biệt A, B sao cho $AB = 2\\\\sqrt 3 $.\",\"options\":[\" $m = 4 \\\\pm \\\\sqrt {10} $\",\" $m = 2 \\\\pm \\\\sqrt {10} $\",\" $m = 2 \\\\pm \\\\sqrt 3 $\",\" $m = 4 \\\\pm \\\\sqrt 3 $\"],\"correct\":[3]}","question_id":"11","ts":"14:27:30+00"},{"date":"20170213","tssec":"1486970823","priority":"0","question":"{\"question_type\":\"single\",\"question\":\" Tìm m để hàm số $y = {x^3} - 6{x^2} + (m - 1)x + 2016$ đồng biến trên khoảng $\\\\left( {1\\\\;;\\\\; + \\\\infty } \\\\right)$.\\r\\n\",\"options\":[\" $m > 13$\",\" $m = - 13$\",\" $m < 13$\",\" $m \\\\ge 13$\"],\"correct\":[1]}","question_id":"12","ts":"14:27:30+00"},{"date":"20170213","tssec":"1486970823","priority":"0","question":"{\"question_type\":\"single\",\"question\":\" Đồ thị sau đây là đồ thị tương ứng của hàm số nào?\\r\\n\",\"options\":[\" $y = \\\\frac{{x + 2}}{{x + 1}}$\",\" $y = \\\\frac{{ - x - 2}}{{x - 1}}$\",\" $y = \\\\frac{{2 - x}}{{x + 1}}$\",\" $y = \\\\frac{{2 - x}}{{x - 1}}$\"],\"correct\":[3]}","question_id":"3","ts":"14:27:30+00"}]};
  data.questions.map(function(value,index){
    var question = JSON.parse(value.question);
    var id='q'+index;
    $("#content").append('<div id="'+id+'">'+question.question+'</div>');
    $("#"+id).css("visibility","hidden");
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,id]);
    MathJax.Hub.Queue(function(){
      $("#"+id).css("visibility","");
    });
  });
});
var showMath = function(id){
  $("#"+id).css("visibility","");
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]},
        skipStartupTypeset: true,
        showMathMenu: true
      });
    </script>
    <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>
  </head>
  <body>
    <div id="content"></div>
  </body>
</html>

正如您所看到的,它工作正常,但是当我将 showMath 而不是匿名函数传递到队列中时,它仍然显示丑陋的未处理表达式。有人能告诉我这是为什么吗?如果我使用匿名函数,如何向它传递变量?

最佳答案

单独传递 showMath 没有任何帮助,因为您必须将 id 传递给 showMath。幸运的是,MathJax 的 API 涵盖了这个用例——您可以传递函数及其参数的数组。

$(document).ready(function(){
  var data = {"questions":[{"date":"20170213","tssec":"1486970823","priority":"0","question":"{\"question_type\":\"single\",\"question\":\" Số điểm cực tiểu của hàm số $y = {x^4} - 2{{\\\\rm{x}}^2} + 100$ là:\",\"options\":[\" 1\",\" 3\",\" 2\",\" 0\"],\"correct\":[0]}","question_id":"5","ts":"14:27:30+00"},{"date":"20170213","tssec":"1486970823","priority":"0","question":"{\"question_type\":\"single\",\"question\":\" Giá trị lớn nhất M và giá trị nhỏ nhất m của hàm số $y = {x^3} - 3{x^2} + 3$ trên đoạn [0;3] là:\",\"options\":[\" M = 3 ; m = -1\",\" M = 0; m = 2\",\" M = 6; m = 1\",\" M = 3; m = 1\"],\"correct\":[0]}","question_id":"6","ts":"14:27:30+00"},{"date":"20170213","tssec":"1486970823","priority":"0","question":"{\"question_type\":\"single\",\"question\":\" Đồ thị hàm số $y = \\\\frac{{ - x + 2}}{{x - 1}}$ có các đường tiệm cận là:\",\"options\":[\" Tiệm cận đứng x = -1; tiệm cận ngang y = -1\",\" Tiệm cận đứng y = 1; tiệm cận ngang x = -1\",\" Tiệm cận đứng x = -1; tiệm cận ngang y = 1\",\" Tiệm cận đứng x = 1; tiệm cận ngang y = -1\"],\"correct\":[3]}","question_id":"7","ts":"14:27:30+00"},{"date":"20170213","tssec":"1486970823","priority":"0","question":"{\"question_type\":\"single\",\"question\":\" Hỏi hàm số y = $ - {x^3} + 3{x^2} + 9x$ nghịch biến trên khoảng nào?\",\"options\":[\" (-$\\\\infty $;3)\",\" (-1;3) \",\" ( -$\\\\infty $; -1) và ( 3; +$\\\\infty $) \",\" ( 3; +$\\\\infty $) \"],\"correct\":[1]}","question_id":"8","ts":"14:27:30+00"},{"date":"20170213","tssec":"1486970823","priority":"0","question":"{\"question_type\":\"single\",\"question\":\" Tìm tất cả các giá trị thực của tham số m để hàm số $y = - \\\\frac{1}{3}{x^3} + m{x^2} + mx - 2017$ nghịch biến trên R.\",\"options\":[\" ( -1; 0) \",\" [-1; 0] \",\" ( - $\\\\infty $; -1) $ \\\\cup $ (0; +$\\\\infty $) \",\" ( - $\\\\infty $; -1] $ \\\\cup $ [ 0; +$\\\\infty $) \"],\"correct\":[0]}","question_id":"9","ts":"14:27:30+00"},{"date":"20170213","tssec":"1486970823","priority":"0","question":"{\"question_type\":\"single\",\"question\":\" Tìm tất cả các giá trị thực của tham số m để hàm số của hàm số $y = \\\\frac{{2mx + 1}}{{m - x}}$ trên có giá trị lớn nhất trên đoạn [2; 3] là $ - \\\\frac{1}{3}$.\",\"options\":[\" 1 \",\" -5 \",\" – 2\",\" 0 \"],\"correct\":[3]}","question_id":"10","ts":"14:27:30+00"},{"date":"20170213","tssec":"1486970823","priority":"0","question":"{\"question_type\":\"single\",\"question\":\" Tìm các giá trị thực của tham số m để đường thẳng $\\\\left( d \\\\right):y = x + m - 1$ cắt đồ thị hàm số $y=\\\\frac{2x+1}{x+1}$ tại 2 điểm phân biệt A, B sao cho $AB = 2\\\\sqrt 3 $.\",\"options\":[\" $m = 4 \\\\pm \\\\sqrt {10} $\",\" $m = 2 \\\\pm \\\\sqrt {10} $\",\" $m = 2 \\\\pm \\\\sqrt 3 $\",\" $m = 4 \\\\pm \\\\sqrt 3 $\"],\"correct\":[3]}","question_id":"11","ts":"14:27:30+00"},{"date":"20170213","tssec":"1486970823","priority":"0","question":"{\"question_type\":\"single\",\"question\":\" Tìm m để hàm số $y = {x^3} - 6{x^2} + (m - 1)x + 2016$ đồng biến trên khoảng $\\\\left( {1\\\\;;\\\\; + \\\\infty } \\\\right)$.\\r\\n\",\"options\":[\" $m > 13$\",\" $m = - 13$\",\" $m < 13$\",\" $m \\\\ge 13$\"],\"correct\":[1]}","question_id":"12","ts":"14:27:30+00"},{"date":"20170213","tssec":"1486970823","priority":"0","question":"{\"question_type\":\"single\",\"question\":\" Đồ thị sau đây là đồ thị tương ứng của hàm số nào?\\r\\n\",\"options\":[\" $y = \\\\frac{{x + 2}}{{x + 1}}$\",\" $y = \\\\frac{{ - x - 2}}{{x - 1}}$\",\" $y = \\\\frac{{2 - x}}{{x + 1}}$\",\" $y = \\\\frac{{2 - x}}{{x - 1}}$\"],\"correct\":[3]}","question_id":"3","ts":"14:27:30+00"}]};
  data.questions.map(function(value,index){
    var question = JSON.parse(value.question);
    var id='q'+index;
    $("#content").append('<div id="'+id+'">'+question.question+'</div>');
    $("#"+id).css("visibility","hidden");
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,id]);
    MathJax.Hub.Queue([showMath, id]);
  });
});
var showMath = function(id){
  $("#"+id).css("visibility","");
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]},
        skipStartupTypeset: true,
        showMathMenu: true
      });
    </script>
    <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML"></script>
  </head>
  <body>
    <div id="content"></div>
  </body>
</html>

关于javascript - Mathjax 在处理时隐藏表达式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42530385/

相关文章:

javascript - 从查询字符串中获取变量,将其与 Javascript 中的数组进行匹配

javascript - Mathjax 多线方程渲染问题

javascript - 如何将 MathJax 和 Math.js 连接到 slider

jquery - phantomjs/selenium 和 jQuery 自动填充表单的方式有区别吗?

javascript - 使用 Content-Range 在 Node.js 中流式传输音频

javascript - ebay 商店自定义页脚的问题

javascript - 如何在加载、后退和前进时运行函数

asp.net - ASP.NET 回发后保持当前 jQuery Accordion Pane 打开?

r - 使用 MathJax 在 Shiny 的应用程序中内联 LaTeX 方程

div 标签的 Javascript onclick 事件