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. notifit

    JavaScript

    多彩なカスタマイズができるシンプルなjQuery通知プラグイン「notifit」

    notifitは多彩なカスタマイズが可能なシンプルな通知機能を実装でき…

  2. Wallpaper

    JavaScript

    背景画像のレイアウトをブラウザ幅に合わせてくれるjQueryプラグイン「Wallpaper」

    WallpaperというjQueryプラグインを使えば背景画像のレイア…

  3. jquery.enhsplitter

    JavaScript

    コンテンツを分離できるフレーム実装「jquery.enhsplitter」

    jquery.enhsplitterはコンテンツを分離させるフレームを…

  4. Jquery Toast Plugin

    JavaScript

    高いカスタマイズ性を備えたトースト通知を実装できる「Jquery Toast Plugin」

    Jquery Toast Pluginは高いカスタマイズ性を備えたアニ…

  5. JavaScript

    JavaScriptで連想配列(ハッシュ)から1つずつ値を取り出して配列に入れてランダムで取得する

    タイトルが分かりづらくてあれなんですが、JavaScriptの連想配列…

  6. Zoomerang.js

コメント

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

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

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP