Question

我有这个jQuery事件处理程序代码，我想将其转换为函数

$("#activate-user").click(function() {
    var userId = [];
    $(':checkbox:checked').each(function(i) {
        userId[i] = $(this).val();
    });
    if(userId.length == 0) {
        //If userId is empty
    } else {
        $.ajax({
            type: 'POST',
            url:  'process.php',
            data: 'option=activate&userId='+userId,
            success: function(msg){
                if(msg == 0) {
                    //If cannot process the query.
                } else {
                    //If query is processed.
                    location.reload(true);
                }
            }
        });
    }   
});

$("#block-user").click(function() {
    var userId = [];
    $(':checkbox:checked').each(function(i) {
        userId[i] = $(this).val();
    });
    if(userId.length == 0) {
        //If userId is empty
    } else {
        $.ajax({
            type: 'POST',
            url:  'process.php',
            data: 'option=block&userId='+userId,
            success: function(msg){
                if(msg == 0) {
                    //If cannot process the query.
                } else {
                    //If query is processed.
                    location.reload(true);
                }
            }
        });
    }
});

这两个事件处理程序之间的唯一区别是值option=

data: 'option=activate&userId='+userId
data: 'option=block&userId='+userId

我希望将它转换为jQuery函数，我尝试这样做，根本不起作用，

(function ($) {
jQuery.fn.userOperation = function(opString) {
    this.click(function() {
        var userId = [];
        $(':checkbox:checked').each(function(i){
            userId[i] = $(this).val();
        });
        if(userId.length === 0) {
            //If userId is empty.
        } else {
            $.ajax({
                type: 'POST',
                url:  'process.php',
                data: 'option='+opString+'&userId='+userId,
                success: function(msg){
                    if(msg == 0) {
                        //If cannot process the query.
                    } else {
                        //If query is processed.
                        location.reload(true);
                    }
                }
            });
        }
    });
}
}(jQuery));

jQuery函数调用：

$('#activate-user').userOperation(function() {
    return 'block';
});

这似乎不起作用，因为我没有正确地将参数传递给函数，因为我是jQuery的新手，我不知道我该怎么做。我哪里错了？这是将参数传递给jQuery函数的正确可行方法吗？

Answer 1

我的出价：

// use an anonymous function to we can still reference the short version
//  of jQuery ($) even in situations where $.noConflict() was applied.
(function($){

    // extending the $.fn is saying "We want to add a function as part of jQuery"
    $.fn.extend({

        // here's the new function we're adding:
        // $(selector).userOperation(action);
        userOperation: function(action){

            // return an each iterator so we can bind to multiple selectors
            // and so we can chain (e.g. $('#foo,#bar).userOperation('delete').show();)
            return this.each(function(i,e){

                // grab the current element and bind to its click event
                $(e).click(function(){

                    // go through the checked boxes and find userIds we're working on
                    // map() makes this easy because it will go through each found item,
                    // process it (in this case return only it's value) then return those
                    // results as an object. Then, we call toArray() so all we have is an
                    // array full of those found values.
                    var userId = $(':checkbox:checked').map(function(i,el){
                      return $(el).val());
                    }).toArray();

                    // check if we have userId entries
                    if (userId.length > 0){

                        // we have entries, fire off the AJAX call
                        $.ajax({
                            type: 'POST',
                            url: 'resources/library/models/users/process.php',
                            data: 'option='+action+'&userId='+userId.join(','),
                            success: function(msg){
                                if (msg == 0){
                                    // cannot process
                                }else{
                                    location.reload(true);
                                }
                            }
                        });
                    }else{
                        // userId array is empty
                    }

                    // block action, in case we bind click to anchors
                    e.preventDefault();
                });
            });
        }
    });

})(jQuery);

// this is how we would attach it to various elements:
$('#block').userOperation('block');
$('#activate').userOperation('activate');

还允许您绑定到多个选择器，使用链接等。我还在join数组上显式调用userId，而不是允许javascript默认将数组转换为字符串。对于任何通过代码的人来说，这似乎更具可读性，恕我直言。

Answer 2

首先，您将函数传递给userOperation，但它需要一个字符串。

而不是：

$('#activate-user').userOperation(function() {
    return 'block';
});

这样做：

$('#activate-user').userOperation('block');

Answer 3

$('#activate-user').userOperation("block");

data参数需要一个sting，你的参数会生成data参数，所以传递你想要的动作，IE是一个字符串。

这个jQuery函数有什么问题？

3 个答案: