穿透功能

Question

我正在寻找通过我的网页上的内容罢工。一些内容是文字，其他是链接，...和我需要一个可以穿透它的功能。

发现这个很好的答案：How do I animate a strike through effect using JavaScript on a piece of text?（第二个答案） 但我想将它转换成函数，以便我可以在任何地方使用它。

他原来的jsfiddle：http://jsfiddle.net/alexdickson/wmBYx/

这里是他的JS：

var findText = function(element, pattern, callback) { 

    if (! element.childNodes) { 
     return; 
    } 
    for (var childi = element.childNodes.length; childi-- > 0;) { 
     var child = element.childNodes[childi]; 
     if (child.nodeType == 1) { 
      findText(child, pattern, callback); 
     } else if (child.nodeType == 3) { 
      var matches = []; 
      var match; 
      while (match = pattern.exec(child.data)) 
      matches.push(match); 
      for (var i = matches.length; i-- > 0;) 
      callback.call(window, child, matches[i]); 
     } 
    } 
} 


findText(document.body, /./g, function(node, match) { 
    var element = document.createElement('span'); 
    node.splitText(match.index + 1); 
    element.appendChild(node.splitText(match.index)); 
    node.parentNode.insertBefore(element, node.nextSibling); 
}); 

var spans = document.getElementsByTagName('span'), 
    spansLength = spans.length, 
    currentSpan = 0, 
    interval = setInterval(function() { 
     if (currentSpan == spansLength) { 
      clearInterval(interval); 
     } 
     spans[currentSpan++].style.textDecoration = 'line-through'; 

    }, 100); 

要告诉你实话，我不明白它的任何，所以我不知道我怎样才能改变这个变成干燥功能。 （甚至不会告诉你我到目前为止，我很惭愧）。

感谢您的帮助

PS：我使用jQuery，所以你更比欢迎大家补充一些吧。

Answer 1

你可以为它创建一个jQuery插件：

$.fn.strikeThrough = (function() { 

    var findText = function(element, pattern, callback) { 

     if (! element.childNodes) { 
      return; 
     } 

     for (var childi = element.childNodes.length; childi-- > 0;) { 
      var child = element.childNodes[childi]; 
      if (child.nodeType == 1) { 
       findText(child, pattern, callback); 
      } else if (child.nodeType == 3) { 
       var matches = []; 
       var match; 
       while (match = pattern.exec(child.data)) 
       matches.push(match); 
       for (var i = matches.length; i-- > 0;) 
       callback.call(window, child, matches[i]); 
      } 
     } 
    } 

    return function(pattern) { 
     pattern = pattern || /./g; 

     if (this.length > 1) { 
      this.each(function() { 
       $(this).strikeThrough(pattern); 
      }); 
      return this; 
     } 

     findText(document.body, pattern, function(node, match) { 
      var element = document.createElement('span'); 
      node.splitText(match.index + 1); 
      element.appendChild(node.splitText(match.index)); 
      node.parentNode.insertBefore(element, node.nextSibling); 
     }); 

     var spans = this[0].getElementsByTagName('span'), 
      spansLength = spans.length, 
      currentSpan = 0, 
      interval = setInterval(function() { 
       if (currentSpan == spansLength) { 
        clearInterval(interval); 
        return; 
       } 
       spans[currentSpan++].style.textDecoration = 'line-through'; 

      }, 100); 

     return this; 
    }; 

})(); 

$(function() { 
    $('div').strikeThrough(); 
}); 

HTML：

<div>strike me out please but <strong>don't</strong> drop my events!</div> 

Demo

Answer 2

这非常简单。

$(function(){ 
    //pass over the jQuery object. 
    strikeThrough($('.ele')); 
}); 

/* 
* Create function outside of .ready() scope 
*/ 
function strikeThrough(ele){ 
    ele.css('textDecoration', 'line-through'); 
} 

And here is the working jsFiddle example.