【Advent calendar】jQueryプラグイン作成で躓いたこと

  • 投稿日
  • 著者 ituki
  • カテゴリー Program
Pocket
LINEで送る

これはadvent calendar4日目の記事です。
3日目の昨日は電子絵本サービス『PIBO（ピーボ）』にお問い合わせをした話でした。

先日ドットインストールのjQueryプラグイン入門で勉強したあと、初めて自作プラグインを作った中で躓いたことがありました。

オプションをcssのプロパティに使いたい！でも動かないorエラーが出る

要素がfixedだったりして左右の位置をオプションで決めたいときなんかに、オプションをプロパティに使いたいですがこれではエラーが出てしまいます…
変数に入れてもダメでした

//プロパティにオプションをつっこむと、エラーでる
elements.css({
~省略~
    opts.pos: 0,
~省略~
});

//変数にオプションつっこむと、動かない
var opts_pas = opts.pos;
elements.css({
~省略~
    opts_pas: 0,
~省略~
});

//.css({})じゃなくて、.css()だと動いた！
elements.css(opts.pos, 0)
もしくは
var opts_pas = opts.pos;
elements.css(opts_pos, 0)

Uncaught TypeError: Illegal invocationというエラーが出た！

.css()の書き方を間違えたため起こりました。シングルクォートで囲んだらエラーが消えました。
普段.css({})しか使わないので…

.css(top, ***)
↓
.css('top', ***)

Object 数値 has no method ‘match’というエラーが出た！

他のmatchを使った場所では起きてないため調べたところ、matchした文字列のところに数値が入っていました。数値を文字列化したらエラーが消えました。
文字列化参考サイト：JavaScriptにおける数値と文字列の相互変換

String(数値)

5日目の明日はjQueryプラグイン作成で気をつけたいところです。
ほんじゃーね;)

jQuery jQueryプラグイン