備忘録 – ページ 27 – 東京発、雲に乗って

2017年4月19日2017年4月21日

【jQuery】配列や連想配列をコピーする

var array2 = array1;

1	var array2 = array1;

のように配列や連想配列をそのまま代入すると「参照渡し」という形になり、
コピー先だけ変更したつもりがコピー元も一緒に変更されてしまいます。

コピーするには配列の中身を代入していく必要があるのですが、
jQueryの場合はextend関数で簡単にコピーできます。

配列：

var array2 = $.extend(true, [], array1);

1	var array2 = $.extend(true, [], array1);

連想配列：

var array2 = $.extend(true, {}, array1);

1	var array2 = $.extend(true, {}, array1);

2017年4月19日2017年4月19日

【JavaScript】連想配列でも配列でも要素数を取得

配列の要素数はlengthで取得できますが、
連想配列の場合はlengthは使えません。
スマートではないですがfor inでループを回してカウントするのが簡単です。

連想配列でも配列でも同じように要素数が取得できる関数です。

var len = function(val) {
  if(val == undefined || val == null) {
    return 0;
  }
  if(val instanceof Array) {
    return val.length;
  }
  else if(val instanceof Object) {
    var _cnt = 0;
    for(var x in val) {
      _cnt++;
    }
    return _cnt;
  }
  else {
    return val.length;
  }
};

var len = function(val) {

if(val == undefined || val == null) {

return 0;

}

if(val instanceof Array) {

return val.length;

}

else if(val instanceof Object) {

var _cnt = 0;

for(var x in val) {

_cnt++;

}

return _cnt;

}

else {

return val.length;

}

};

文字列だったら長さが返ってきます。

2017年4月18日2017年4月18日

【WordPress】Twenty Seventeenテーマで5つ目のセクションを追加する

Twenty Seventeenテーマでは
「外観」→「カスタマイズ」→「テーマオプション」から
簡単に4つまでのセクションを設定することができるようになっていますが、
ここに5つ目のセクション設定枠を追加するにはPHPファイルを変更しなくてはならないようです。

といっても非常に簡単です。
functions.phpに下記のコードを追加するだけです。

function wpc_custom_front_sections($num_sections) {
  return 5; /* 変更したいセクションの数 */
}       
add_filter('twentyseventeen_front_page_sections', 'wpc_custom_front_sections');

function wpc_custom_front_sections($num_sections) {

return 5; /* 変更したいセクションの数 */

}

add_filter('twentyseventeen_front_page_sections', 'wpc_custom_front_sections');

これでセクションを設定するプルダウンの数が5つになります。
簡単ですね。

2017年4月18日

【jQuery】val()、prop()で値を変更した際にonchangeイベントを発火させる

jQueryでフォームの値を変更した際に、単に

$(フォーム).val(値);
$(フォーム).prop('checked', true);

1 2	$(フォーム).val(値); $(フォーム).prop('checked', true);

としただけでは、onchangeイベントは実行されませんが、

$(フォーム).val(値).change();
$(フォーム).prop('checked', true).change();

1 2	$(フォーム).val(値).change(); $(フォーム).prop('checked', true).change();

のようにchange()を呼ぶことでonchangeイベントを発火させることができます。

2017年4月17日2017年4月17日

【jQuery】Ajaxの非同期通信を中断する

jQueryの$.ajax関数で

async: true

1	async: true

にして非同期通信を行うときに、通信を中断することができます。

やりかたは、$.ajax関数の戻り値を変数に格納し、

var ajax_obj = $.ajax({
  url: '(URL)'
 ,type: 'POST'
 ,data: '(データ)'
 ,async: true
 ,success: function(result) {
    // 成功時の処理
  }
 ,error: function(xml, error, thrown) {
    if(thrown == 'abort') {
      alert('処理を中断しました');
    }
  }
});

var ajax_obj = $.ajax({

url: '(URL)'

,type: 'POST'

,data: '(データ)'

,async: true

,success: function(result) {

// 成功時の処理

}

,error: function(xml, error, thrown) {

if(thrown == 'abort') {

alert('処理を中断しました');

}

});

中断したい場合はその変数のabortメソッドを呼びます。

ajax_obj.abort();

1	ajax_obj.abort();

abortメソッドを呼ぶと、上記の例のように
thrownに「abort」が返されますので
エラーなのか中断なのかの切り分けが可能です。

通信中にモーダルでローディング表示を行っている場合などに
ローディングダイアログに「中断」リンクをつけてあげると親切ですよね。