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

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラグイン「mlens」

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラ…

  2. crossfade.js

    JavaScript

    スクロールで画像をクロスフェードできるjQueryプラグイン「crossfade.js」

    crossfade.jsというjQueryプラグインを使えば、スクロー…

  3. Lobibox

    JavaScript

    レスポンシブなメッセージを通知できる「Lobibox」

    Lobiboxはレスポンシブなメッセージボックスを通知できるjQuer…

  4. JavaScript

    画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」

    こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。Lo…

  5. Impulse Slider

    JavaScript

    3Dスライダーを実装できるjQueryプラグイン「Impulse Slider」

    Impulse SliderというjQueryプラグインを使えば3Dス…

  6. JavaScript

    シンプルで軽量のレスポンシブなjQueryスライダー「ResponsiveSlides.js」を使っ…

    とてもシンプルで使いやすそうなレスポンシブのjQueryスライダー「R…

コメント

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

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

最近の記事

  1. ミノン メン 薬用全身シャンプー
  2. ウェアラブルヒーター ネック

アーカイブ

PAGE TOP