這個jQuery函數有什麼問題？

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=

1. data: 'option=activate&userId='+userId
2. data: 'option=block&userId='+userId值

我想這個把它轉換成jQuery函數N代表我試圖做這樣它完全不工作，

(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'); 

，您還可以綁定到多個選擇，使用鏈接，等等。我也顯式調用userId陣列上的join而不是允許JavaScript默認爲鑄造一個數組串。對於任何經歷代碼的人來說，這看起來更具可讀性，恕我直言。

Answer 2

其一，你傳遞一個函數來userOperation，但它需要一個字符串。

取而代之的是：

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

這樣做：

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

Answer 3

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

的數據參數需要刺痛你的論點使數據參數，因此通過它你想要的動作拿一個字符串IE。