0

プラグインが動作している JS Fiddle

数値(ST,RD,TH)の縮約プラグイン。

私は自分のプラグインを作成して遊んでいます。現時点では、構文などに慣れてきたばかりです。これは、今日必要で見つけたスクリプトで遊んでいるだけです。

わかりました - 私のプラグインは、番号の最後に th、st、rd などを追加し、span.num で囲みます。問題は、毎回プラグインを呼び出す必要があるすべての番号についてですか?

2 つの番号があるので、両方に一意のクラス名を付けて、プラグインを呼び出す必要があります (フィドルを参照)。

私の質問: 1 つのクラス名だけを何度も使用して、それぞれに対して異なる結果を返すことは可能ですか?

今日の私の英語についての返信とすべての謝罪に事前に感謝します-頭がおかしいです！

    $(document).ready(function(){
        $(".num1").simpleContraction();
        $(".num2").simpleContraction();
    });


    (function( $ ){
        $.fn.simpleContraction = function() {

          var num = this.text();
          var len = num.length, last_char = num.charAt(len - 1), abbrev

            if (len == 2 && num.charAt(0) == '1') {
                abbrev = 'th'
            } else {
                if (last_char == '1') {
                    abbrev = 'st'
                } else if (last_char == '2') {
                    abbrev = 'nd'
                } else if (last_char == '3') {
                    abbrev = 'rd'
                } else {
                    abbrev = 'th'
                }
            }

            return this.html(num+abbrev);
        };
    })( jQuery );
4

2 に答える 2

1

this.each()jQueryコレクションの各要素が順番に処理されるように、コードをブロックで囲む必要があります。

$.fn.simpleContraction = function() {
    return this.each(function() { 
        // NB: "this" is now a DOM element - wrap if required
        var $this = $(this);
        ...
    });
}

そうは言っても、私は実際にこれを真のプラグインとして書くことはしません-間違った要素で呼び出された場合、それは本当に厄介な副作用をもたらします。

代わりに.text、要素から元のテキストを渡す関数を渡すことができるという事実を利用して、それをその関数の戻り値に置き換えることができます。

$.simpleContraction = function(index, text) {
    // parse "text" etc
    ... 
    return num + abbrev;
}

// call on required elements
$('span.num').text($.simpleContraction);

このアプローチの利点は、DOM操作を文字列操作から分離し、DOMに格納されている変数だけでなく、任意の文字列変数で使用できる関数を提供することです。

于 2012-11-28T17:28:06.847 に答える
1

プラグインが呼び出された各項目をループするだけです。

$.fn.plopPlugin = function(){
    return this.each(function(){
        // do your stuff on a single item
        // no need to return antyhing from within this function
        // unless you want to continue (return true)
        // or break (return false)
    });
};

だから... http://jsfiddle.net/KmjpV/3/

(function( $ ){
    $.fn.plopPlugin = function() {
      return this.each(function(){
        var num = $(this).text();
        var len = num.length, last_char = num.charAt(len - 1), abbrev

        if (len == 2 && num.charAt(0) == '1') {
            abbrev = 'th'
        } else {
            if (last_char == '1') {
                abbrev = 'st'
            } else if (last_char == '2') {
                abbrev = 'nd'
            } else if (last_char == '3') {
                abbrev = 'rd'
            } else {
                abbrev = 'th'
            }
        }
        alert(num+abbrev)
        $(this).html(num+abbrev);
      });
    };
})( jQuery );
于 2012-11-28T17:29:42.153 に答える