Mathjax: पैरेंट डिव के आंतरिक HTML को फिर से भरने के बाद टॉगल काम नहीं कर रहा है

\toggle कमांड टॉगल तत्व के लिए DOM नोड में ईवेंट श्रोताओं को जोड़कर काम करता है, जिससे एक्सप्रेशन को अपडेट करने का कारण बनता है कि कौन सा सब-एक्सप्रेशन प्रदर्शित किया जाना है, और एक्सप्रेशन को फिर से टाइप करना है। आपकी अभिव्यक्ति result.innerHTML = result.innerHTML पहले result पेड़ को HTML स्ट्रिंग के रूप में क्रमबद्ध करती है और फिर result की सामग्री को सेट करने के लिए इसे फिर से पार्स करती है। चूंकि ईवेंट श्रोता क्रमांकन का हिस्सा नहीं हैं, इसलिए जब आप ऐसा करते हैं तो वे खो जाते हैं, इसलिए टॉगल अभिव्यक्ति काम करना बंद कर देगी (जैसा कि MathJax मेनू, पॉप-अप और अन्य सुविधाएं जो ईवेंट श्रोताओं पर निर्भर करती हैं)। यहां तक ​​​​कि अगर आपके पास ईवेंट श्रोता थे, तो टॉगल को टॉगल करने पर फिर से टाइपसेटिंग का मतलब होगा कि आप अपने संशोधित URL को री-टाइपसेट एक्सप्रेशन (यदि कोई हो) में खो देंगे।

\eqref (और \ref ) के एक संस्करण को लागू करना बेहतर होगा जो मूल रूप से बाहरी लिंक को ठीक से संभाल लेगा। यह आपके स्वयं के कार्यान्वयन को कॉल करने के लिए उनकी परिभाषाओं को ओवरराइड करके किया जा सकता है जो यह देखने के लिए संदर्भ लेबल की जांच करता है कि क्या यह एक बाहरी दस्तावेज़ को संदर्भित करता है, और फिर उस दस्तावेज़ को लिंक बनाने के लिए आवश्यक डेटा सेट करता है। उदाहरण के लिए, आप यह परंपरा बना सकते हैं कि \eqref{file.html#1.1} समीकरण 1.1 को file.html (या कोई भी URL जिसे आप उपयोग करना चाहते हैं) में संदर्भित करेगा। अपडेट किया गया \eqref उस रूप में लेबल ढूंढ सकता है और डेटा सेट कर सकता है ताकि मूल कोड ठीक से लिंक हो सके। हम tagformat एक्सटेंशन की url(id) विधि का उपयोग यह जांचने के लिए कर सकते हैं कि क्या id पहले से ही एक पूर्ण URL है और यदि है तो इसे वापस कर दें, अन्यथा सामान्य रूप से उचित URL बनाएं।

यहाँ एक ऐसा कार्यान्वयन है:

<script>
MathJax = {
  loader: {load: ['[tex]/tagformat']},
  tex: {
    packages: {'[+]': ['tagformat', 'external-eqref']},
    tagformat: {
      //
      //  If the ID is already a URL, use it, otherwise construct the url as usual
      //
      url: (id, base) => (id.indexOf('#') >= 0 ? id : base + '#' + encodeURIComponent(id))
    }
  },
  startup: {
    ready() {
      //
      //  These would be replaced by import commands if you wanted to make
      //  a proper extension.
      //
      const Configuration = MathJax._.input.tex.Configuration.Configuration;
      const CommandMap = MathJax._.input.tex.SymbolMap.CommandMap;
      const Label = MathJax._.input.tex.Tags.Label;
      const BaseMethods = MathJax._.input.tex.base.BaseMethods.default;

      //
      //  Create a command map to override \ref and \eqref
      //
      new CommandMap('external-eqref', {
        ref:   ['HandleRef', false],
        eqref: ['HandleRef', true]
      }, {
        HandleRef(parser, name, eqref) {
          //
          //  Get the label parameter (keeping parse position as it is)
          //
          const i = parser.i;
          const label = parser.GetArgument(name);
          parser.i = i;
          //
          //  If the label is of the form url#tag and the label doesn't already exist
          //    split the url and tag
          //    create a label using the tag and a proper URL for the link
          //
          if (label.indexOf('#') >= 0 && !(parser.tags.allLabels[label] || parser.tags.labels[label])) {
            const [url, tag] = label.split(/#/);
            const id = parser.tags.formatId(tag);
            parser.tags.labels[label] = new Label(tag, parser.tags.formatUrl(id, url));
          }
          //
          //  Call the original function to perform the reference
          //
          BaseMethods.HandleRef(parser, name, eqref);
        }
      });
      //
      //  Create the package for the overridden macros
      //
      Configuration.create('external-eqref', {
        handler: {macro: ['external-eqref']}
      });

      MathJax.startup.defaultReady();
    }
  }
}
</script>

यदि आप चाहें तो इसे एक उचित टीएक्स एक्सटेंशन में बनाया जा सकता है जो अपनी फाइल में रहता है।

@dvpc , बहुत बहुत धन्यवाद,
तो यह मेरा खराब कार्यान्वयन था ... पूरी तरह से स्पष्टीकरण के लिए धन्यवाद। दुर्भाग्य से, मैं आपके द्वारा प्रदान किए गए कोड का उपयोग नहीं कर सका, क्योंकि मेरा पेजिनेशन अलग है, मैं बाहरी लिंक का उपयोग नहीं करता, अलग-अलग डिव मेरे मामले में अलग-अलग पेजों के लिए खड़े हैं, एक को छोड़कर सभी को छिपाया जा रहा है, ताकि मैं केवल उद्धृत को पहचान सकूं समीकरण किस डिव पर रहता है ताकि मैं इसे पहले अन-हाइड कर सकूं। मैं पहले कोड का आदी था

    var eqsLabelsArrayPerPage=[];
    for(pageNum=0; pageNum<totalPageNumber; pageNum++){
        var jax = MathJax.getAllJax("resultPage-"+pageNum);
        var neWLabelsInPage=[];
        for (var i=0, l=jax.length; i<l; i++) {
            //alert(jax[i].math);
            jax[i].math.replace(/\\label\{([^\}]+)\}/g, function(x,y){
                neWLabelsInPage.push(y);
                return false;
            });
        }
        eqsLabelsArrayPerPage.push(neWLabelsInPage);
    }
    var eqOnWPVar;
    result.innerHTML=result.innerHTML.replace(/(href\=\"\#mjx\-eqn\-([^\"]*)\")/g,  function(x,y1,y2){
        eqOnWPVar=eqsLabelsArrayPerPage.findIndex(function(x) {
            return x.indexOf(y2) !== -1;
        });
        return y1+" onclick=\"currentPage="+eqOnWPVar+"; changePage();\"";
    });

जिसका दूसरा भाग अब बदल दिया गया है

    var eqCitations=[];
    result.innerHTML.replace(/(href\=\"\#mjx\-eqn\-([^\"]*)\")/g,  function(x,y1,y2){
        eqCitations=document.querySelectorAll("mrow[href='#mjx-eqn-"+y2+"']");

        for(var i=0, len=eqCitations.length; i<len; i++){
            eqCitations[i].parentNode.parentNode.parentNode.onclick=function(){
                currentPage=eqsLabelsArrayPerPage.findIndex(function(subArray){
                    return subArray.indexOf(y2) !== -1;
                });
                changePage();
            };
        }
        return false;
    });

प्रत्येक उद्धरण के लिए एक समीकरण के लिए currentPage का पुनर्मूल्यांकन करना कुशल नहीं है, लेकिन onclick समकालिक रूप से काम नहीं करने के साथ ऐसा लगता है कि मेरे पास कोई बेहतर तरीका नहीं है।

फिर से धन्यवाद, आपने इस तरह की बातचीत में जो समय दिया, उसकी मैं बहुत सराहना करता हूं

खैर, यहां एक संभावित दृष्टिकोण है जो वह कर सकता है जो आप कम से कम ओवरहेड के साथ खोज रहे हैं। यह सब मैथजेक्स के भीतर किया जाता है, इसलिए अतिरिक्त कोड की आवश्यकता नहीं है जैसा आपने ऊपर दिया है, लेकिन इसे काम करने के लिए थोड़ा सा सेटअप लगता है।

तीन मुख्य घटक हैं: मानक टैगिंग वर्ग का एक उपवर्ग जो उस पृष्ठ का ट्रैक रखता है जिस पर प्रत्येक लेबल वाला समीकरण चालू है, एक टीएक्स कॉन्फ़िगरेशन जो चिह्नित करने के लिए \ref और \eqref मैक्रोज़ को ओवरराइड करता है संदर्भ जो अन्य पृष्ठों को इंगित करते हैं, और अंत में एक आउटपुट पोस्ट-फ़िल्टर जो एक ईवेंट श्रोता को उन लिंक पर जोड़ता है जो लिंक बनाने से पहले एक और पृष्ठ खोलते हैं (और वर्तमान को बंद कर देते हैं)।

मुझे लगता है कि आपको जो चाहिए वह करना चाहिए (या कम से कम इसके लिए ढांचा दें)। यहां एक पूरी फाइल है जिसमें कई लेबल वाले समीकरण हैं जिनके लिंक विभिन्न पृष्ठों में हैं।

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Page switching \eqref links</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script>
let currentPage = 1;
MathJax = {
  startup: {
    ready() {
      //
      //  These would be replaced by import commands if you wanted to make
      //  a proper extension.
      //
      const TagsFactory = MathJax._.input.tex.Tags.TagsFactory;
      const AmsTags = MathJax._.input.tex.ams.AmsConfiguration.AmsTags;

      //
      // Subclass the AmsTags object to track page information
      //
      class PageTags extends AmsTags {

        constructor() {
          super();
          this.page = null;        // the div for the last page where we found an equation
          this.pageNo = "";        // the number of that page
          this.math = null;        // the MathItem for the current equation
        }

        //
        //  Save the MathItem and do the usual startup.
        //
        startEquation(math) {
          this.math = math;
          super.startEquation(math);
        }

        //
        //  Check if there are labels for this equation.
        //  If so, find the page for this MathItem
        //    and save the page with the label information.
        //  The do the usual finishing up.
        //
        finishEquation(math) {
          const labels = Object.keys(this.labels);
          if (labels.length) {
            const page = this.getPage();
            labels.map((label) => {this.labels[label].page = page});
          }
          super.finishEquation(math);
        }

        //
        //  If there is a cached page div and this MathItem is in it, return its page number.
        //  Otherwise, look through the parents of the math until you find its page.
        //  If you found a page, cache it and get its number.
        //  Return the page number.
        //
        getPage() {
          let node = this.math.start.node;
          if (this.page && this.page.contains(node)) return this.pageNo;
          while (node && (!node.id || node.id.substr(0,11) !== 'resultPage-')) {
            node = node.parentNode;
          }
          if (node) {
            this.page = node;
            this.pageNo = node.id.substr(11);
          }
          return this.pageNo;
        }

      }

      //
      //  These would be replaced by import commands if you wanted to make
      //  a proper extension.
      //
      const Configuration = MathJax._.input.tex.Configuration.Configuration;
      const CommandMap = MathJax._.input.tex.SymbolMap.CommandMap;
      const Label = MathJax._.input.tex.Tags.Label;
      const ParseUtil = MathJax._.input.tex.ParseUtil.default;

      //
      //  Create a command map to override \ref and \eqref to handle page changes.
      //
      new CommandMap('page-eqref', {
        ref:   ['HandleRef', false],
        eqref: ['HandleRef', true]
      }, {
        //
        //  Copied from BaseMethods.HandleRef, and modified to add page information.
        //  
        HandleRef(parser, name, eqref) {
          //
          //  Get the label name and look up its data.
          //
          const label = parser.GetArgument(name);
          let ref = parser.tags.allLabels[label] || parser.tags.labels[label];
          //
          //  If none, then reprocess this item, if we are on the first pass,
          //  and use a blank label.
          //
          if (!ref) {
            if (!parser.tags.refUpdate) {
              parser.tags.redo = true;
            }
            ref = new Label();
          }
          //
          //  Get the tag string.
          //
          const tag = (eqref ? parser.tags.formatTag(ref.tag) : ref.tag);
          //
          //  Create an mrow with the parsed tags contents and href link.
          //
          const node = parser.create('node', 'mrow', ParseUtil.internalMath(parser, tag), {
            href: parser.tags.formatUrl(ref.id, parser.options.baseURL), 'class': 'MathJax_ref'
          });
          //
          //  If the page of the linked quation is not the same as our own equation,
          //    Add a page attribute to the mrow.
          //
          if (ref.page !== parser.tags.getPage()) {
            node.attributes.set('data-page', ref.page);
          }
          parser.Push(node);
        }
      });
      //
      //  Create the package for the overridden macros
      //
      Configuration.create('page-eqref', {
        handler: {macro: ['page-eqref']},
        tags: {page: PageTags}
      });

      //
      //  Do the normal setup (create the input and output jax and other objects)
      //
      MathJax.startup.defaultReady();

      //
      //  The listener function for when a link goes to a different page:
      //     Unhide the linked page and hide the current one.
      //     Save the current page as the linked one.
      //
      const listener = function (event) {
        const n = this.getAttribute('data-page');
        document.getElementById('resultPage-' + n).classList.remove('hidden');
        document.getElementById('resultPage-' + currentPage).classList.add('hidden');
        currentPage = n;
      };

      //
      //  Add a post-filter to the output jax to look for links that are to different
      //    pages, add the event listener to the <a> element for the link, and
      //    propagate the page to the anchor where the listener can find it.
      //
      MathJax.startup.output.postFilters.add(({data}) => {
        for (const link of data.querySelectorAll('[data-page]')) {
          link.parentNode.addEventListener('click', listener, true);
          link.parentNode.setAttribute('data-page', link.getAttribute('data-page'));
        }
      });
    }
  },
  tex: {
    packages: {'[+]': ['page-eqref']},
    tags: 'page'
  }
}
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
<style>
div {
  border: 1px solid grey;
  padding: .5em;
}
h1 {
  font-size: 130%;
  margin-top: 0;
}
.hidden {
  display: none;
}
.spacer {
  height: 40em;
  width: 1em;
  background-color: red;
  margin: 1em 0;
  border: none;
}
</style>
</head>
<body>

<div class="spacer"></div>

<div id="resultPage-1">
<h1>Page 1</h1>
A math formula:
$$E = mc^2. \tag{1}\label{eq1}$$
That is the formula.  
We link to \eqref{eq3}.
</div>

<div id="resultPage-2" class="hidden">
<h1>Page 2</h1>
This page has a different formula:
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}. \tag{2}\label{eq2}$$
And a second one:
$$\frac{x+1}{x-1}. \tag{2.1}\label{eq2.1}$$
We link to \eqref{eq1}.
</div>

<div id="resultPage-3" class="hidden">
<h1>Page 3</h1>
This one has yet another formula:
$$f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz. \tag{3}\label{eq3}$$
We link to \eqref{eq2}, and \eqref{eq3}.
</div>

<div class="spacer"></div>

</body>
</html>

गणित के ऊपर और नीचे की लाल पट्टियाँ पृष्ठ को स्क्रॉल करने के लिए पर्याप्त बड़ा बनाने के लिए हैं ताकि आप देख सकें कि उचित समीकरण को लक्षित किया जा रहा है। ध्यान दें, हालांकि, अलग-अलग ब्राउज़र एसवीजी पदों पर स्क्रॉलिंग को थोड़ा अलग तरीके से संभालते हैं। मैं लक्ष्यीकरण को बेहतर बनाने पर विचार कर रहा हूं ताकि यह अधिक सुसंगत हो, लेकिन वह अभी तैयार नहीं है। कॉमनएचटीएमएल इसके साथ बेहतर करता है।

किसी भी मामले में, देखें कि क्या इससे आपको वह मिलता है जो आप चाहते हैं।

मैं प्रश्नों के उत्तर देने में आपके द्वारा लगाए गए समय और ऊर्जा की पर्याप्त सराहना नहीं कर सकता। मैंने अभी-अभी आपका जवाब देखा, बहुत अच्छा लग रहा है। हालांकि, इससे पहले कि मैं आपके द्वारा अपने ऐप में दिए गए कोड को लागू कर सकूं, मुझे इसमें कुछ समय लगेगा। आपका बहुत बहुत धन्यवाद।

कोई दिक्कत नहीं है। यह एक दिलचस्प परियोजना थी, और यह काम करने लायक थी कि इसे कैसे किया जा सकता है, भविष्य में दूसरों के संदर्भ के लिए।