jQueryでウィンドウサイズによって処理を変える

JavaScript

jQueryでパターン化されたクラス名をループで1つずつ取り出して処理する

どうでもいい内容なんですがちょっとやりたかったのでメモです。jQueryで例えばsample1、sample2…といったパターン化されたクラス名を1つずつ取得して処理していくっていうやり方です。クラス名 + クラス数といった感じでforを使って取得していきます。

[ads_center]

やり方

まずは以下のようなHTMLを作成してみます。

HTML

<input type="button" id="start-stop" value="start/stop">
<div class="sample1">class1</div>
<div class="sample2">class2</div>
<div class="sample3">class3</div>
<div class="sample4">class4</div>
<div class="sample5">class5</div>
<div class="sample6">class6</div>
<div class="sample7">class7</div>
<div class="sample8">class8</div>
<div class="sample9">class9</div>
<div class="sample10">class10</div>

で、この場合はsample + 1〜10なのでforを使ってsampleに1〜10を一つ一つ結合していきます。

JavaScript

$(function(){
    var class_text = "sample"; // クラス名の固定化されている文字
    var num = 10; // パターン化されているクラス名の数
    var array_class1 = [];
    for (i = 0; i < num + 1; i++){
        array_class1.push('.' + class_text + (i + 1));
        $(array_class1[i]).hide(); // 取得した要素を1つずつ処理していく
    }

    var array_class2 = []
    $('#start-stop').click(function(){
        for(j = 0; j < num + 1; j++){
            array_class2.push('.' + class_text + (j + 1) + ":not(:animated)");
            $(array_class2[j]).slideToggle(500);
        }
    });
});

array_class1という配列を定義して、pushでクラス名を追加していきます。で、あとは配列から一つずつクラス名を取り出して好きな処理をすればいいだけです。ここではhideで非表示にしています。

id名start-stopというボタンをクリックすると非表示にしていた要素がスライドして表示されます。slideToggleを使っているのでもう一度クリックでスライドアップします。以下サンプルです。

サンプル


class1
class2
class3
class4
class5
class6
class7
class8
class9
class10

ということで、なんかもっといい方法があるかもしれないっすけど一つの方法ってことで。

jQueryでウィンドウサイズによって処理を変えるjQueryでsetTimeoutを使えば各要素のアニメーションを実行させる時間を調整できる前のページ

クールでプロフェッショナルなWordPressのテーマ50次のページ

関連記事

  1. jCalculator

    JavaScript

    jQueryプラグインで電卓を実装できる「jCalculator」

    jCalculatorというjQueryプラグインを使えば入力フィール…

  2. marginotes

    JavaScript

    テキストの余白に注釈をつけて読みやすい記事をつくれる「marginotes」

    marginotesは、クールなマージンノートを作成するjQueryプ…

  3. footerMenu

    JavaScript

    スクロールでフッターメニューを表示させる「footerMenu」

    footerMenuはスクロールするとフッターメニューを表示させること…

  4. SVG 3D Tag Cloud jQuery Plugin
  5. FlexSlider

    JavaScript

    jQueryプラグインのレスポンシブな軽量スライダー「FLEXSLIDER」の使い方や設定方法

    すごくいいですね、これ。スマートフォンにも対応させたいスライダーを探し…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP