0

插件工作的 JS Fiddle

数值（ST，RD，TH）的收缩插件。

我一直在玩创建自己的插件，目前我刚刚习惯了语法等，这只是我在玩我今天需要并找到的脚本。

好的 - 我的插件应该在任何数字的末尾添加 th、st、rd 等，并用 span.num 包裹它，问题是我每次都需要调用插件的每个数字？

所以我有两个数字，我需要给它们两个唯一的类名，然后调用我的插件（见小提琴）

我的问题：是否可以多次只使用一个类名，并为每个类名返回不同的结果？

我提前感谢任何回复和所有为我今天的英语道歉 - 脑筋急转弯！

    $(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 回答