How to dynamically read and fade in and out the contents of multiple text files using a jQuery function

This article introduces an efficient and scalable solution: using only one jQuery function and a semantic HTML structure, you can load corresponding txt files for hundreds of buttons, and achieve smooth fadeOut/fadeIn content switching effects, avoiding duplication of code and hard coding.

To bind independent text files (such as file1.txt, file2.txt...) to each of 300 buttons without rewriting functions or HTML 300 times, the key is to decouple data and behavior : inline the file path as a data attribute (data-file) into the button, and the unified event processor reads and performs asynchronous loading.

The following is a recommended implementation that is modern, robust, and easy to maintain:

✅ Recommended writing method: delegate event data attribute driven

 
  <div class="content">
    <div class="buttons">
      <button class="button" type="button" data-file="file.txt">First</button>
      <button class="button" type="button" data-file="file1.txt">Second</button>
      <button class="button" type="button" data-file="faq/privacy.txt">Privacy Policy</button>
      <!-- Unlimited appending possible without modifying JS -->
    </div>

    <div class="textBox">
      <div class="answerBox">Click Any Question Button</div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $(document).ready(function() {
      // Use event delegation to support dynamically added buttons (more flexible)
      $(&#39;.buttons&#39;).on(&#39;click&#39;, &#39;.button&#39;, function(e) {
        e.preventDefault();
        const fileName = $(this).data(&#39;file&#39;); // Safely obtain data-file value const $target = $(&#39;.answerBox&#39;);

        // To prevent animation confusion caused by fast connection points: ensure that the pre-order animation is completed before executing $target.stop(true, true).fadeOut(300, function() {
          $.get(`files/${fileName}`)
            .done(function(text) {
              $target.text(text.trim()).hide().fadeIn(400);
            })
            .fail(function() {
              $target.text(&#39;❌ Failed to load content. Please check the file path.&#39;).hide().fadeIn(400);
            });
        });
      });
    });
  </script>

? Key optimization instructions:

• The data-file attribute replaces onclick : HTML is cleaner and conforms to the principle of separation of concerns; it facilitates subsequent batch generation with JS (such as rendering buttons from JSON configuration).
• Event delegate (.on('click', '.button', ...)) : Even if the button is dynamically inserted later (such as loading through AJAX), it can be automatically bound without re-initialization.
• .stop(true, true) : Clear the unfinished animation queue to prevent flickering or lagging caused by multiple clicks.
• Path splicing security : Use the template string files/${fileName} to clearly agree that all files are located in the files/ directory, which facilitates unified management.
• Error handling.fail() : When the file does not exist or the network fails, friendly prompts instead of silent failure.
• .trim() cleans newlines/spaces : avoid empty lines at the end of txt files causing redundant whitespace.

? Advanced suggestions (for 300 scenarios):

• Configuration-driven rendering : save button metadata as JSON (such as questions.json), and use JS to dynamically generate a button list, completely eliminating the cost of manual HTML maintenance;
• Caching mechanism : cache loaded file contents in memory (such as const cache = {}) to avoid repeated requests;
• Loading status prompt : Temporarily display Loading... or skeleton screen in .answerBox to improve user experience;
• Support Markdown or simple HTML : If you need rich text in the future, you can use .html() instead and cooperate with the sanitize-html library to ensure security.

This solution takes into account simplicity, maintainability and performance. It is written once and adapted for life - whether there are 3 or 300 buttons, there is no need for structural modifications to HTML and JS.

The above is the detailed content of How to dynamically read and fade in and out the contents of multiple text files using a jQuery function. For more information, please follow other related articles on the PHP Chinese website!