森のコーディング森のコーディング2014年02月マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。2月28ボタンクリックで画像を切り替えるjavascriptはjQueryのindex(this)とeq()が便利カテゴリ:jQueryjavascript並んでるボタンをクリック(あるいはマウスオーバー)したら、それに応じてメインの画像が切り替わるっていうのよくあるじゃない。↓こういうやつライブラリもたぶんいっぱいあるんだろうけど、これくらいはサクっと自作しときたいよね、ってことでボタンのclassに番号をふっていって、画像のclassにも番号をふっていって、対応させるみたいなことをやってたんです。mainをくっつけて「mainimage1」のついてる画像を表示する、みたいな。いうめんどくさいこと、みんなもやってるね?よね?そういう方、jQueryのindex(this)とeq()を使えばもっと楽になるんだよ!index(this)とは、そいつが何番目にいるやつなのかを数字で教えてくれるってやつ。li").index(this);alert(num);});ってやったとしたら、一番左のボタンをクリックしたときには、「0」って出るし、2番目のボタンをクリックしたときには「1」って出る。※番号は0から始まるから、1番目が0だよね。これを使えば、いちいちclass内に番号を仕込んでマッチングさせる必要なんてないんだ。1番目のボタンをクリックしたら、1番目の画像を出す。2番目のボタンをクリックしたら、2番目の画像を出す。いうのが簡単にできる。改善したソースはこちら。//3});html側がずいぶんスッキリしたじゃないか。jsは3行1numにクリックしたliが何番目なのかその数字を入れるよ。2#mainimageに並んでる大きい画像たちは全部いったん消す。3numに入ってる数字と同じ番目にある画像を出す。長い英単語をいれるとtableの中をつきぬけちゃうイラレでスライスを速くするスクリプト。bluetoothヘッドセット1時間1円で暖かい。夏のPC仕事のおともに冷えピタ。クールヘッドで脳のスピードがあがります。お仕事のご依頼・お問い合わせはこちらコーディングのお仕事が得意です。