2011-07-29 4 views
0

私はこのjQueryのイベントハンドラのコードを持っていたし、私は機能この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); 
       } 
      } 
     }); 
    } 
}); 

この2つのイベントハンドラとの唯一の違いはある、option=

  1. data: 'option=activate&userId='+userId
  2. data: 'option=block&userId='+userIdすなわち値に変換したいです

これをjQuery functioに変換したい私は正しく引数を渡すわけではないとして、これは、動作しているようですしない

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

: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の関数呼び出し、私はまったく動作しないこの方法をやってみましたため私はjQueryの初心者ですから、どうやってこれを行うのか分かりません。どこが間違っていますか?これはjQuery関数に引数を渡す正しい、実行可能な方法ですか?

は1 .. FOR

答えて

2

マイ入札:

// 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を文字列に配列をキャストにデフォルト設定することが可能など、あなたは、複数のセレクタにバインドすることができます使用チェーン。これは、コードIMHOを通過するすべての人にとって、より読みやすいように見えます。

+0

ほとんどのコードは私には見えません:D、申し訳ありませんがjQueryの初心者です。あなたのアドバイスを広げることができたらうれしく思います。 –

+0

@ibrahim:私ちょうどあなたのためにそれをコメントしました。 ;-) –

+0

あなたのようなものです、ありがとう:) –

1

をありがとう、あなたはuserOperationに関数を渡しているが、それは、文字列を期待しています。

の代わりに、この:あなたがしたいアクションをデータパラメータが刺さを必要とし、あなたの引数は、データパラメータを作るので、それを渡す

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

ok、関数の代わりに文字列を渡すにはどうすればよいですか? –

+0

私の拡張答えを見てください。 – FishBasketGordo

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

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

これを行ってくださいIEの文字列を取る。

関連する問題