jQueryプラグイン拡張例【コールバック関数の追加】

この記事の例では、jQuery プラグイン拡張メソッドについて説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

<script language="javascript" type="text/javascript">
function doSomething(callback) {
  // … 
  // Call the callback
  callback(&#39;stuff&#39;, &#39;goes&#39;, &#39;here&#39;); // 给callback赋值，callback是个函数变量
}
function foo1(a, b, c) {
  // I&#39;m the callback
  alert(a + " " + b + " " + c);
}
doSomething(foo1); // foo1函数将使用callback函数中的数据 stuff goes here
var foo2 = function(a,b,c) {
  // I&#39;m the callback
  alert(a + " " + b + " " + c);
}
doSomething(foo2); // foo2函数将使用callback函数中的数据 stuff goes here
doSomething(function(a,b,c){
  alert(a + " " + b + " " + c); // function函数将使用callback函数中的数据 stuff goes here
});
</script>

コールバック パラメーターが有効であるためには、関数である必要があります。コールバックの役割を果たすため。

<script language="javascript" type="text/javascript">
function doSomething(callback) {
  // … 
  // Call the callback
  if(typeof callback === &#39;function&#39;){
    callback(&#39;stuff&#39;, &#39;goes&#39;, &#39;here&#39;); // 给callback赋值，callback是个函数变量
  }else{
    alert(&#39;jb51.net&#39;);
  }
}
function foo1(a, b, c) {
  // I&#39;m the callback
  alert(a + " " + b + " " + c);
}
doSomething(foo1); // foo1函数将使用callback函数中的数据 stuff goes here
var foo2 = function(a,b,c) {
  // I&#39;m the callback
  alert(a + " " + b + " " + c);
}
doSomething(foo2); // foo2函数将使用callback函数中的数据 stuff goes here
doSomething(function(a,b,c){
  alert(a + " " + b + " " + c); // function函数将使用callback函数中的数据 stuff goes here
});
var foo3 = &#39;a&#39;;
doSomething(foo3);
</script>

foo3は関数ではありません、jb51.netをポップアップ

jQueryインスタンス

オリジナル関数

$.fn.citySelect=function(settings)

コールバックを追加

$.fn.citySelect=function(settings, changeHandle) // 添加回调函数changeHandle

コールバック関数に値を代入

rr

市と郡の保存データとトリガーされた変更イベントタイプを取得します areaType

//选项变动赋值事件
var selectChange = function (areaType) {
  if(typeof changeHandle === 'function'){ // 判断callback是否是函数
    var prov_id = prov_obj.get(0).selectedIndex;
    var city_id = city_obj.get(0).selectedIndex;
    var dist_id = dist_obj.get(0).selectedIndex;
    if(!settings.required){
      prov_id--;
      city_id--;
      dist_id--;
    };
    if(dist_id<0){
      var data = {
        prov: city_json.citylist[prov_id].p,
        city: city_json.citylist[prov_id].c[city_id].n,
        dist: null
      };
    }else{
      var data = {
        prov: city_json.citylist[prov_id].p,
        city: city_json.citylist[prov_id].c[city_id].n,
        dist: city_json.citylist[prov_id].c[city_id].a[dist_id].s
      };
    }
    changeHandle(data, areaType); // 返回两个处理好的数据
  }
};

各イベントで実行

フロントエンドで使用します

// 选择省份时发生事件
prov_obj.bind("change",function(){
    cityStart();
    selectChange('prov'); // 返回数据
});
// 选择市级时发生事件
city_obj.bind("change",function(){
    distStart();
    selectChange('city'); // 返回数据
});
// 选择区级时发生事件
dist_obj.bind("change",function(){
    selectChange('dist'); // 返回数据
});

コールバックによって返されたデータを使用して使用しますselectAgent 関数

$("#s_city").citySelect({
  prov: "江苏省",
  city: "宿迁市",
  dist: "宿城区",
  nodata: "none"
},
function(data, type) {
  selectAgent(data.city, data.dist);
});

で、Ajax は対応するエージェント データを取得します。

改造プラグインが完成しました。