如何修改jQuery Typer.js实现随机组合多组响应内容？

First, we’ll make two key changes to get the random combined response behavior you want:

1. Update the Typer.js plugin to support generating random combinations from three groups of responses.
2. Adjust your response code to define the three groups and pass them to the plugin.

Step 1: Modified Typer.js Plugin Code #

Replace your existing Typer.js code with this updated version. I’ve added comments to highlight the new functionality:

(function($){ 
  $.fn.typer = function(options){ 
    // Handle if the first argument is a string/array instead of an options object
    if ($.isArray(options) || typeof options === 'string') {
      options = { text: options };
    }
    
    // Default options, now including a "groups" option for our response sets
    options = $.extend({}, { 
      char: '', 
      delay: 5000, 
      duration: 800, 
      endless: true, 
      onType: $.noop, 
      afterAll: $.noop, 
      afterPhrase: $.noop,
      groups: null // New option: array of 3 arrays (one for each response group)
    }, options); 

    // Determine if we're using groups or the original text array
    var useGroups = !!options.groups && options.groups.length === 3;
    var text = useGroups ? null : (options.text || []);
    text = $.isArray(text) ? text : text.split(" "); 

    return this.each(function(){ 
      var elem = $(this), 
          isVal = {input:1, textarea:1}[this.tagName.toLowerCase()], 
          isTag = false, 
          timer, 
          c = 0; 

      // Helper: Pick a random element from an array
      function getRandomElement(arr) {
        return arr[Math.floor(Math.random() * arr.length)];
      }

      // Helper: Generate a combined phrase by picking one random item from each group
      function generateCombinedPhrase() {
        if (!useGroups) return '';
        // Combine with spaces - adjust the separator if you want something else (e.g., '-' or '')
        return getRandomElement(options.groups[0]) + ' ' + getRandomElement(options.groups[1]) + ' ' + getRandomElement(options.groups[2]);
      }

      (function typetext() { 
        var e = '';
        if (useGroups) {
          // Generate a new random combination each time we start typing
          e = generateCombinedPhrase() + '';
        } else {
          // Original behavior for static text arrays
          var i = arguments.length > 0 ? arguments[0] : 0;
          e = ({string:1, number:1}[typeof text] ? text : text[i]) + '';
        }

        var char = e.substr(c++, 1); 

        if( char === '<' ){ isTag = true; } 
        if( char === '>' ){ isTag = false; } 

        elem[isVal ? "val" : "html"](e.substr(0, c) + ($.isFunction(options.char) ? options.char() : options.char || ' ')); 

        if(c <= e.length){ 
          if( isTag ){ 
            typetext(); 
          } else { 
            timer = setTimeout(typetext, options.duration/10); 
          } 
          options.onType(timer); 
        } else { 
          c = 0; 
          if (useGroups) {
            // After finishing a phrase, generate a new combination next time
            timer = setTimeout(typetext, options.delay); 
          } else {
            // Original cycling logic for static arrays
            var i = arguments.length > 0 ? arguments[0] + 1 : 1;
            if (i === text.length && !options.endless) { 
              return; 
            } else if (i === text.length) { 
              i = 0; 
            } 
            timer = setTimeout(typetext, options.delay, i); 
            if(i === text.length - 1) options.afterAll(timer); 
          }
          options.afterPhrase(timer); 
        } 
      })(0); 
    }); 
  }; 
}(jQuery));

Step 2: Update Your Response Content Code #

Replace your existing response code with this version, filling in your actual responses in each group:

if (animation) {
  var text = $('#home .typer-title');
  
  // Define your three groups of responses here
  // Group 1: First part of the combined response
  var group1 = [
    "Response 1-1", 
    "Response 1-2", 
    "Response 1-3",
    "Response 1-4",
    "Response 1-5",
    "Response 1-6",
    "Response 1-7"
  ];
  
  // Group 2: Middle part of the combined response
  var group2 = [
    "Response 2-1", 
    "Response 2-2", 
    "Response 2-3"
  ];
  
  // Group 3: Last part of the combined response
  var group3 = [
    "Response 3-1", 
    "Response 3-2", 
    "Response 3-3",
    "Response 3-4",
    "Response 3-5",
    "Response 3-6",
    "Response 3-7"
  ];

  if (!!$.prototype.typer) {
    text.typer({
      groups: [group1, group2, group3], // Pass the three groups to the plugin
      delay: 5000, // Time (ms) between finishing one phrase and starting the next
      duration: 800, // Time (ms) taken to type each full phrase
      endless: true // Keep generating new random combinations indefinitely
    });
  }
}

Key Changes Explained #

• Groups Support: The plugin now accepts a groups option which is an array of three arrays. Each sub-array contains the possible responses for that group.
• Random Combination: Every time the plugin finishes typing a phrase, it generates a new combination by picking one random item from each group.
• Backward Compatible: The original functionality (cycling through a static array of phrases) still works if you don’t pass the groups option.
• Customizable Separators: If you don’t want spaces between the groups, just change the separator in the generateCombinedPhrase function (e.g., use '' for no space, or '-' for a dash).

This setup will give you the random combined responses you’re looking for, pulling one item from each group every time the typer refreshes.

内容的提问来源于stack exchange，提问作者Jeff Cockrum