jqueryクリックli重複ロード防止実装コード
5477 ワード
コンテンツのロードが遅いので、liで何気なく2回クリックした場合、2回要求される可能性があります.これは私たちが見たくないことです.今日javascript-jquery群の1筒で2つのdemoを送ってくれました.彼の方法はクリックしたliノードをコピーして、ロードが終わったら再挿入することです.明らかに私の機能には向いていません.困ったことに、liクリック時にloadingピクチャ(ajaxロード前)を加えて、liノードにimg要素が存在するかどうかを判断し、存在しない場合はajaxコンテンツをロードし、そうでない場合は処理しない.テストに合格できました(^o^)/.
プレゼンテーションアドレスhttp://demo.jb51.net/js/jquery_li_click/demo.html
パッケージのダウンロードhttp://xiazai.jb51.net/201012/yuanma/jquery_li_click.rar
jquery ajax
<br>$(function(){
<br>setHeight("#siderbar",130); //
<br>$(window).resize(function(){setHeight("#siderbar",130)}); //
<br>$.get("sider.html",function(data){
<br>$('#siderbar_box').append(data);
<br>});
<br>/* ID */
<br>function setHeight(id,h){
<br>var windowHeight=$(window).height();
<br>$(id).css({"height":(windowHeight-h)+"px"});
<br>}
<br>// li
<br>$("#siderbar_box ul li a").live("click",function(){
<br>var $current=$(this);
<br>var $currentli=$(this).parent();
<br>if($currentli.children("ul").attr("id")==undefined) // ajax
<br>{
<br>$currentli.siblings().children("ul").slideUp('fast');
<br>$currentli.siblings().children("a").removeClass("focus");
<br>$.get("chapter.html",function(data){
<br>$current.addClass("focus").parent().append(data);
<br>showChapter(); // content
<br>});
<br>
<br>}else{
<br>$currentli.siblings().children("ul").slideUp('fast');
<br>$currentli.siblings().children("a").removeClass("focus");
<br>if($currentli.children("ul").is(":visible")) //
<br>{
<br>
<br>$current.removeClass("focus").parent().children("ul").slideUp('fast');
<br>}else{
<br>
<br>$current.addClass("focus").parent().children("ul").slideDown('slow');
<br>showChapter();
<br>}
<br>}
<br>});
<br>//content
<br>function showChapter(){
<br>$.get("chapter.html",function(data){
<br>$("#content").html(data);
<br>$("#content ul li").live("click",function(){ //
<br>$current=$(this);
<br>if($current.children("table").attr("id")==undefined) // ， ajax
<br>{
<br>if($current.children("span").find("img").size()<1) // ，
<br>{
<br>$current.children("span").append("<img src='loading.gif' border='none'/>"); //
<br>$.get("table.html",function(data){
<br>$current.append(data).children("span").addClass("highlight").find("img").remove(); //
<br>});
<br>}
<br>}else{
<br>
<br>if($current.children("table").is(":visible"))
<br>{
<br>$current.children("span").removeClass("highlight").next("table").hide();
<br>
<br>}else{
<br>
<br>$current.children("span").addClass("highlight").next("table").show();
<br>}
<br>}
<br>
<br>});
<br>});
<br>}
<br>});
<br>
DEMO©copyright by Tomi-Eric's
プレゼンテーションアドレスhttp://demo.jb51.net/js/jquery_li_click/demo.html
パッケージのダウンロードhttp://xiazai.jb51.net/201012/yuanma/jquery_li_click.rar