jQuery でclick要素の初回クリックを判定する方法の覚書

jquery-click-first
このエントリーをはてなブックマークに追加
PR

jQueryでボタン等を作った場合に

初回だけさせたい動作がある場合に、そのクリックが現在表示されているページで初回のクリックなのかどうかを判定して実行する方法

 

 

 

jQuery で初回クリックを判定する

jQueryには hasClass という便利なものがあって

これを条件にしてやると、簡単に 初回クリックかどうかを判別出来ます

$('.button').on('click',function(){
  
  if ($(this).hasClass('first-click')) {
    //first-chlick のクラスがあるので 何も実行しない
  } else {
    
    //実行する内容
    $(this).attr('scr','url');
    
    //初回の実行が終わったら、クラスをつけて 2回目以降とする
    $(this).addClass('first-click';)
    
  }
})

 

これで、判定することが出来ます

 

 

どういった用途に使ったかというと

ボタンをクリックすると、表示される iframe を実装するときに

iframe のタグに data-src を設定しておき

それを初回クリック時のみ読み取るというもの

 

2回目以降は、ボタンをクリックすることで その iframe の表示非表示をさせるようにしてあるので

表示、非表示のトリガーに data-src から取得してっていうのを繰り返すと

毎回 iframe が新規に読み込まれるので、それを回避して 開閉のボタンの機能を保つように

今回の、初回クリックの判定を上のコードのようにしました

 

今回は、hasclass を使っているのは

this と組み合わせたかったからです

複数のボタンを一つのコードで制御したかったので、そのボタンにclassをつけてやるのが手っ取り早かったです

 

 

その他の方法

ボタンが一つだけっていう場合は、 1 == 変数 となる

if ( 1 == 変数)

変数++

 

この2つを使って動作を制御させてやるのも良いかと思います

この場合は、初回のみならず、2回目、3回目と動作を変えてやることが出来ます

 

 

 

一つのコードで複数のボタンを制御して

さらに、初回以外も振り分けたい場合は class名+変数 を使って

hasclass で振り分けができるかと思います

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)