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. NO IMAGE

    JavaScript

    フレキシブルで軽量なJavaScriptモーダル実装「Vanilla Modal」

    Vanilla Modalは、フレキシブルでファイル容量も軽量なCSS…

  2. AnimateScroll

    JavaScript

    面白いエフェクトのページ内スクロールを実装できるjQueryプラグイン「AnimateScroll」…

    ページの任意の場所にスクロールできるjQueryプラグイン「Anima…

  3. notifit

    JavaScript

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

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

  4. JavaScript

    シンプルな構成で簡単に実装することができるツールチップ「jQuery PowerTip」

    とてもシンプルな構成で簡単に実装することができるjQueryプラグイン…

  5. swipe-menu-js

    JavaScript

    横からスライド・スワイプ表示するハンバーガーメニュー実装「swipe-menu-js」

    swipe-menu-jsは横からスライド・スワイプ表示するシンプルな…

  6. vTicker

    JavaScript

    シンプルで使い方も簡単!垂直ティッカーを実装できるjQueryプラグイン「vTicker」

    シンプルで使い方も簡単な垂直ティッカーを実装できるjQueryプラグイ…

コメント

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

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

最近の記事

  1. クリニカのY字タイプのフロス
  2. 日和山公園の桜
  3. 成城石井 フレンチロースト
  4. COMOLI カシミアシルクニットパーカ
  5. 橋

アーカイブ

PAGE TOP