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

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

関連記事

  1. TwentyTwenty

    JavaScript

    2枚の画像を見比べれるjQueryプラグイン「TwentyTwenty」

    TwentyTwentyは2枚の画像を見比べれる便利なjQueryプラ…

  2. TV Credits

    JavaScript

    垂直・水平方向に滑らかに流れていくティッカーを実装できるjQueryプラグイン「TV Credits…

    TV Creditsは垂直方向や水平方向に流れていくティッカーを実装す…

  3. Chocolat

    JavaScript

    レスポンシブ対応のシンプルなLightbox風のjQueryプラグイン「Chocolat」

    Chocolatはレスポンシブに対応したシンプルでスタイリッシュなLi…

  4. JavaScript

    jQueryプラグイン・2014年上半期56選まとめ

    気づいたら2014年も上半期が終わってしまいましたね。そんなわけで、2…

  5. no-image

    JavaScript

    背景にSVGによるライン(線)をランダムで生成する「ckLine.js」

    ckLine.jsは背景にSVGによるライン(線)をランダムで生成する…

コメント

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

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

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP