未捕获类型错误：无法使用'；在'；操作员搜索…Custum jQuery插件

我已经搜索了，发现了，而且，虽然他们很接近，但似乎没有什么能与我的问题相匹配

我正在尝试旋转成一个插件，而这并不是我想要的

问题

我正在尝试创建一个jQuery插件，它用一个跨距包装每个字母，然后用随机颜色和字体大小对其进行样式设置。该插件应在悬停或单击时工作。第一次加载页面时，没有错误。悬停或单击时，会出现错误“UncaughtTypeError:无法使用'in'运算符搜索…”

HTML文件

<div id="firstBox">This box works on hover!</div>
<div id="secondBox">This box works on click!</div>
<div id="thirdBox">This box has custom settings!</div>

此框适用于悬停！
这个盒子一点击就可以工作！
此框具有自定义设置！

jQuery

;(function ($) {
  $.fn.randomLetterStyles = function( options ) {

    var settings = $.extend({
      colors: ["#ddd", "#333", "#999", "#bbb"],
      sizes:["12"],
      type:"hover",
      defaultColor: "#999",
      defaultSize: "12"
    }, options );

    if(settings.type == "hover") {
      $(this).hover(function(){      
          wrapLetters(this);
          $('.random-styles', this).css('color', randomColor());
          $('.random-styles', this).css('font-size', randomSize());
      }, function(){
          $('.random-styles', this).css({'color':settings.defaultColor, 'font-size':settings.defaultSize});     
      }); 
    }
    else if(settings.type == "click") {
      $(this).on("click", function() {
          wrapLetters(this);
          $('.random-styles', this).css('color', randomColor());
          $('.random-styles', this).css('font-size', randomSize());
      });
    }
    else {
      return "Invalid Type";
    }
  };    


  //Recursive function by Logan Smyth
  // Wrap every letter in a <span> with .random-color class.
  function wrapLetters(el){
    if ($(el).hasClass('random-styles')) return;

    // Go through children, need to make it an array because we modify
    // childNodes inside the loop and things get confused by that.
    $.each($.makeArray(el.childNodes), function(i, node){
      // Recursively wrap things that aren't text.
      if (node.nodeType !== Node.TEXT_NODE) return wrapLetters(node);

      // Create new spans for every letter.
      $.each(node.data, function(j, letter){
        var span = $('<span class="random-styles">').text(letter);
        node.parentElement.insertBefore(span[0], node);
      });

      // Remove old non-wrapped text.
      node.parentElement.removeChild(node);
    });
  }

  function randomColor() {
    var index = Math.floor(Math.random() * settings.colors.length);
    return settings.colors[index];
  }

  function randomSize() {
    var index = Math.floor(Math.random() * settings.sizes.length);
    return settings.sizes[index];
  }
} ( jQuery )); 

$(document).ready(function () {
  $("#firstBox").randomLetterStyles();
  $("#secondBox").randomLetterStyles({type:"click"});
  $("#thirdBox").randomLetterStyles(); 
});

；（函数（$）{
$.fn.randomLetterStyles=函数（选项）{
变量设置=$.extend({
颜色：[“ddd”、“333”、“999”、“bbb”]，
尺寸：[“12”]，
键入：“悬停”，
defaultColor:#999“，
默认大小：“12”
}，选项）；
如果（settings.type==“悬停”）{
$（this）.hover（函数（）{
包装工（本）；
$（'.random style'，this.css（'color'，randomColor（））；
$（'.random styles'，this.css（'font-size'，randomSize（））；
}，函数（）{
$（'.random styles'，this）.css（{'color'：settings.defaultColor，'font size'：settings.defaultSize}）；
}); 
}
else if（settings.type==“单击”）{
$（此）。在（“单击”，函数（）上）{
包装工（本）；
$（'.random style'，this.css（'color'，randomColor（））；
$（'.random styles'，this.css（'font-size'，randomSize（））；
});
}
否则{
返回“无效类型”；
}
};    
//Logan-Smyth的递归函数
//将每个字母包装在一个带有随机颜色的类别中。
函数包装器（el）{
if（$（el）.hasClass（'random-styles'））返回；
//通过子项，需要将其设置为数组，因为我们修改了
//循环中的子节点，这会让事情变得混乱。
$.each（$.makeArray（el.childNodes），函数（i，节点）{
//递归地包装非文本的内容。
if（node.nodeType！==node.TEXT\u node）返回包装器（node）；
//为每个字母创建新的跨距。
$.each（node.data，function（j，字母）{
变量span=$（''）.text（字母）；
node.parentElement.insertBefore（跨度[0]，节点）；
});
//删除旧的未包装文本。
node.parentElement.removeChild（节点）；
});
}
函数randomColor（）{
var index=Math.floor（Math.random（）*settings.colors.length）；
返回设置。颜色[索引]；
}
函数大小（）{
var index=Math.floor（Math.random（）*settings.size.length）；
返回设置。大小[索引]；
}
}（jQuery））；
$（文档）.ready（函数（）{
$（“#firstBox”）.randomLetterStyles（）；
$（“#secondBox”）.randomLetterStyles（{type:“click”}）；
$（“#thirdBox”）.randomLetterStyles（）；
});

---

如果有帮助的话，我必须玩。

错误在以下部分：

$.each(node.data, function(j, letter){
  var span = $('<span class="random-styles">').text(letter);
  node.parentElement.insertBefore(span[0], node)
});

在

设置方面，您的变量范围也有问题。该变量在插件中必须是全局变量，而不仅仅是在init函数中

错误在以下部分：

$.each(node.data, function(j, letter){
  var span = $('<span class="random-styles">').text(letter);
  node.parentElement.insertBefore(span[0], node)
});

在
设置方面，您的变量范围也有问题。该变量在插件中必须是全局变量，而不仅仅是在init函数中