みなさん、こんにちは。

今回はjQuery中心のお話です。

 

今回、作成したのはポートフォリオサイトなどでよくあるスキルのグラフです。と言ってもデザインはいたって簡単なものです。

今回の制作のポイントとしては、引数を使うこと。それも2つ。

まずはデモをご覧ください。2パターン切り替えられるようになってます。

DEMO①

DEMO②

 

次にコードです。

HTML
  CSS

jQuery
HTMLはtableのみです。CSSのtdのwidthがグラフの一目盛りの幅になります。

jQueryはflugのtrueとfalseを切り替えることで表示パターンを切り替えられるようにしています。 trueが①、falseが②

 

使ったメソッドなど

.append・・・セレクタの要素の最初に要素を挿入する。

 

.prepend・・・セレクタの要素の最後に要素を挿入する。

 

for()・・・繰り返し処理をする。（）内は、（初めのiの値;終わりのiの値;iの変化値）となっている。

 

配列・・・[]で囲むことで配列にできる。配列には順番がつけられ、左から順に0,1,2・・・となる。1からスタートでないことに注意。

 

引数・・・使う場合によって変化する値を文字でおいておくことができる。今回はskillとnumとおいて関数を記述。その関数をfor文の中で使うときにiとskiiArr[i]（skillArr配列のi番目の値）とおくことで、関数のskillのところをiに、numのところをskiiArr[i]と置き換えて処理をしてくれる。 つまりi=0の時は、skillArr[0]=3なので、関数の中身は以下のようになります。

これがDEMOの一番目（Illustrator）の値になっています。

 

今回は以上です。正直、引数の説明とか全然足りてないと思うので、いろいろ調べてみてください。使いこなすと便利なことは間違いないです。

「ここはこうしたほうが」とか「もっといい方法があるよ」とかご意見ありましたら、Facebookにコメントお願いします。