2

我正在寻找浏览我网页上的内容。一些内容是文本，其他是链接，......我需要一个可以穿透它的功能。

找到了这个很好的答案：如何在一段文本上使用 JavaScript 设置删除线效果？ （第二个答案）但我想将它转换成一个函数，以便我可以在任何地方使用它。

他原来的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);

说实话，我什么都不懂，所以我不知道如何将其转换为 DRY 函数。（甚至不会告诉你我到目前为止得到了什么，我很惭愧）。

谢谢你的帮助

PS：我使用的是 jquery，所以非常欢迎您在其中添加一些内容。

4

2 回答 2

6

你可以为它创建一个 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>

演示

于 2012-09-06T02:31:17.603 回答
-2

这非常简单。

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

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

这是有效的 jsFiddle 示例。

于 2012-09-06T02:19:42.743 回答