2

ウェブページのコンテンツに取り消し線を引こうとしています。コンテンツの一部はテキストで、他はリンクです...そして、それを打ち消すことができる機能が必要です.

この素晴らしい答えを見つけました:テキストの一部に JavaScript を使用して取り消し線をアニメーション化するにはどうすればよいですか? （2番目の回答）しかし、どこでも少し使用できるように、関数に変換したいと思います。

彼のオリジナルの 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 に答える