只有在类名为== x时才加载ajax

时间:2012-11-01 01:29:16

标签: javascript jquery ajax class if-statement

我编写了以下代码,希望只有在内容尚未加载到div中时才会加载ajax。基本上,当我使用ajax加载内容并根据当前加载的内容为内容提供类名。如果当前的类名是已经在div中加载的内容,那么我不加载ajax,否则用ajax加载内容。

现在无论div的类名是什么,ajax请求都会触发。知道为什么这不起作用吗?

这是网站:(点击左眼)

http://www.uvm.edu/~areid/homesite/index.html

这是javascript函数:

else if(id =='left-eye23')
                    {       
                        leftcontent = $("#left-content");                       
                        content = leftcontent.attr('class');
                        if(content !== 'photos')
                        {       
                            alert("content is not photos"); 
                            SlideOut(move);
                            $("#relativeContainer").css('z-index','-1');
                            var leftcontent;
                            $("#left").bind("webkitTransitionEnd mozTransitionEnd oTransitionEnd msTransitionEnd transitionend", 
                            function(){ 
                                $.ajax({
                                url:'photos.php',
                                beforeSend: function(){
                                    leftcontent.html('<img src="loading.gif" /> Now loding...');
                                },
                                }).done(function(data){
                                    leftcontent.html(data);
                                    leftcontent.addClass("photos");
                                }); 
                                });
                            }
                        else if(content == 'photos')
                        {
                            SlideOut(move); 
                            $("#relativeContainer").css('z-index','-1');
                            alert('content is photos');
                        }

                    }

1 个答案:

答案 0 :(得分:3)

使用jQuery验证类的最佳方法是通过.hasClass()。如果元素有多个类,则它将无法正确匹配您正在使用的.attr()测试。

// If it doesn't have the class 'photos', do your AJAX call
if( !$("#left-content").hasClass('photos'))
{       
   alert("content is not photos"); 
  SlideOut(move);
 $("#relativeContainer").css('z-index','-1');
 // Then do the AJAX, etc...
}
// Otherwise do the other stuff...
// Unless you have another case not shown in your code above,
// this can just be a plain else {} rather than the else if {}
else if ($("#left-content").hasClass('photos'))
{
  SlideOut(move); 
  $("#relativeContainer").css('z-index','-1');
  alert('content is photos');
}