1
10
Jul
Share

変数にセットしてjsの無駄を減らす

どういうイベントで表示させるかは別の話なのでおいときますが、なんかのイベント時にメッセージをjsで表示させたいときに、という話。
表示させる場所はCSSで指定してるとして。

$("#hoge_btn").click(function(){      var Message="メッセージ";
Message=$('<div id="hogehoge">'+Message+'</div>');
$("body").append(Message);
Message.delay(1000).fadeOut(500,function(){
Message.remove();
});
});

まぁ、↑のこんな感じでかくのがとりあえずのゴールだとします。

jQuery(function($){
$("#hoge_btn").click(function(){$("body").append('<div id="hogehoge">めっせーじ</div>');
$("#hogehoge").delay(1000).fadeOut(500);
});
});

なにも考えずに↑のかんじで書くと最初はいいけど２回目クリックすると#hogehogeが複数存在してるのでうまいこと消えません。fadeOutはOpacityをいじるだけなので、要素自体は無くなりません。

んじゃということで。

$("#hoge_btn").click(function(){$("body").append('<div id="hogehoge">メッセージ</div>');
$("#hogehoge").delay(1000).fadeOut(500,function(){
$(this).remove();
});
});

こんな感じで書いてみます。まぁ、とりあえずの問題は解決します。でもこれではまだまだムダが多いとのこと。

$("#hoge_btn").click(function(){
var Message =$('<div id="hogehoge"> メッセージ </div>');$("body").append(Message);
Message.delay(1000).fadeOut(500,function(){
Message.remove();
});
});

こんなかんじで表示させる部分ごと変数に入れてしまえば無駄を減らすことが出来ます。
appendのところがちょっと理解不足かもな。
とはいえまだ無駄があるらしいのでそれはまたオイオイつぶすとします。。。。

rewさんを始め、noriさん、tinybeansさん、hogenishiさんに教えてもらいました。
いつもありがとうございます＞＜

Tags:

One Awesome Response.

Leave a Reply

Additional comments powered by BackType