jQueryで1回だけ実行するイベントを設置する方法

javascript
この記事は約3分で読めます。
スポンサーリンク

jQueryで1回だけ処理をする場合、便利な「one」メソッドというのがある。
「one」メソッドとは、メソッド名のままですが「1度だけ」実行する処理のことを言います。
処理を繰り返したくない時などに有効です。

一度しか押せないボタンの作り方

実際の使い方は以下のjQueryをご確認ください。

jQuery

$(".demo").one("click", function() {
// 1度だけ実行する処理内容
});
このボタンは一度しか押せません。1度だけボタン

この「one」メソッドを使ってイベントを書くと1度しか実行できない処理を書くことができます。
ただ、リロードしたりページを閉じてもう一度開くと、ボタンを押せてしまいます。
それを防ぎたい場合は、ローカルストレージを利用してユーザーのイベントを記憶しておけば安心。

リロードしたりページを閉じてもう一度開いても1度しか押せないボタンを作る方法

jQuery

if(localStorage.getItem("btn-click")){
// 再度開いた時にボタンをクリックしていたら実行する処理内容
}
$(".demo").on("click", function(){
if(!localStorage.getItem("btn-click")){
localStorage.setItem("btn-click", "check");
// 1度だけ実行する処理内容
}
});
このボタンは一度しか押せません。1度だけボタン

これでリロードしてもブラウザを閉じても1度しか押せないボタンを作ることができました!
「再度開いた時にボタンをクリックしていたら実行する処理内容」には、ボタンを押してリロードした場合の処理を書いておきます。デモでは、ボタンを灰色にしてボタンのテキストを変更しています。

ローカルストレージの説明

簡単にローカルストレージ(localStorage)の説明を。
ローカルストレージ(localStorage)は、ブラウザに元々ついている機能。
古いブラウザでもローカルストレージ(localStorage)は、機能します。
「localStorage.setItem(key, value)」で値をブラウザに記憶し、記憶した値を「localStorage.getItem(key)」で利用します。

ブラウザに登録するlocalStorage.setItem(key, value)

この中の「key」と「value」は何を入れても大丈夫です。
デモでは「key」には、「”btn-click”」が入っていて
「value」には、「”check”」が入ってます。

ブラウザに記憶した値を利用するlocalStorage.getItem(key)

ブラウザに記憶したアイテムを呼び出すときは、「localStorage.getItem(key)」を使います。
この「key」には、「localStorage.setItem()」で記憶した「key」が入っています。
デモだと「key」には「”btn-click”」が入っています。

登録した値を削除するlocalStorage.clear(key)

ローカルストレージに登録したら、削除する方法も一緒に覚えておけば
さらに便利にローカルストレージを使えますね!
「localStorage.clear(key)」で「key」に削除したいキーを入れます。
デモのローカルストレージを削除する場合には「key」に「”btn-click”」が入ります。
「key」に何も入れないとすべてのローカルストレージを削除することになります。

デモのローカルストレージを削除する
SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました