くりーむわーかー

プログラムとか。作ってて ・試しててハマった事など。誰かのお役に立てば幸いかと。 その他、いろいろエトセトラ。。。

jquery

jqueryでメニューの外でクリックしたら閉じる

タイトル通り。対象の要素外でクリックした際に対象の要素を消したい場合の書き方。ググればサンプルは一杯出てくると思うけど、2016/10時点で多分一番いいやり方。この手の実装って方法ありすぎて、どれがいいのかわからなくなるのでメモメモ。

$(document).on('click', function (event) {
    if (!$(event.target).closest('.menuClass').length) {
        $('.menuClass').hide();
    }
});

参考にしたとこだと「$(document).on('click touchend', function(event) {」ってやってたけど、自分はclickだけでいいや。

jQuery.extend()でハマる(配列)

jQueryのextend()で若干はまったのでメモ。

オブジェクトのマージをしてくれる便利関数。プラグインとして定義している機能の引数にデフォルト値とかを突っ込んでおくのによく利用するんだけど、配列はダメっぽい?まぁ多分、自分のプラグインの作りがダメなんだろうけども・・・。

例えば下の感じのオプションを定義してるとして、

//プラグインのパラメータ初期値 設定
var settings = {
    mainwidth: 800,
    mainheight: 400,
    paddingx: 30,
    paddingy: 30,
    dataset: [],//これがダメ
    clickfunction: function () { }
}

「init:」の中で下の感じで引数を受け取る。

//プラグインのパラメータ設定。「options」が引数
settings = $.extend(true, settings, options);//とりあずディープコピー。

これだけだとdatasetがおかしくなる場合がある。例えば、下の感じでプラグインを呼ぶとして、

$('#targetDom').somethingPlugin(****);

↑をページ内で引数の配列の中身を変えて何回か呼ぶ場合、要素数が一番大きい配列でプラグイン内のdatasetが固定される。何回呼んでも。。。

あんま調べてないので、今は下の感じで、配列だけ別に代入してる。

//プラグインのパラメータ設定。「options」が引数
settings = $.extend(true, settings, options);//とりあずディープコピー。
settings.dataset = options.dataset;

必須のオプション以外では使えませんね。。。。

問合せ