Question

数值的收缩插件（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 );

Answer 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中的函数。

Answer 2

您只需要遍历调用插件的每个项目：

$.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 );

创建简单的插件，我的第一个插件运行到一个错误

2 个答案: