2011-01-24 119 views
1

嗨,即时通讯使用此代码的链接列表,其动态填充。我想当我点击它来保持填充而不是动画回到其原始位置。我不明白的是两件事。 “if (!$(this)”代码的一部分,以及如何当我没有在任何链接上的一类电流它找到任何?非常感谢!有人可以为我解释这段代码吗?

$(function() { 
    $('#secondary_content_what_we_do li a').hover(function() { 
     if (!$(this).hasClass("current")) { 
      $(this).stop().animate({ 
       "paddingLeft": "10px" 
      }, 400).addClass('column_hover'); 
     } 
    }, function() { 
     if (!$(this).hasClass("current")) { 
      $(this).stop().animate({ 
       "paddingLeft": "0px" 
      }, 'slow').removeClass('column_hover'); 
     } 
    }); 

    $('#secondary_content_what_we_do a').click(function() { 
     $('a').removeClass('column_active').removeClass("current"); 
     $(this).addClass('column_active').addClass("current"); 
     $('#secondary_content_what_we_do li a').trigger('mouseleave'); 
     var url = $(this).attr('href'); 
     $('#loading_content').hide().load(url).fadeIn(1000); 
     return false; 
    }); 
}) 

UPDATE 由于某种原因,我不能评论。我现在明白,但我没有在我的CSS当前类,所以我不知道如何行帮助。

+0

了`current`类被添加到`anchor`。没有为类声明任何css规则并不重要,jQuery只是用它来识别和跟踪元素的状态。因此,当您将鼠标悬停在某个元素上时,代码会标识该悬停元素是否是您单击的最后一个元素,并相应地执行操作。 – fearofawhackplanet 2011-01-24 18:01:46

回答

2

本声明:

if (!$(this).hasClass("current")) 

正在做几件事情。它在jQuery对象中使用$(...)包装this变量(在这种情况下指的是悬停的元素),然后调用其上的hasClass(...)方法,然后记录(!)结果。声明全文“如果这是盘旋在不具备类元素‘当前

至于你的问题的第二部分’,那么该块内执行代码”,我想你指该行:

$('a').removeClass('column_active').removeClass("current"); 

,以及如何在选择锚没有一类current它的工作原理。如果选择的a元素没有current类,则该语句将不起作用(请让我知道这是不是你问的)。

2

if (!$(this)不是一个完整的表达式; !是否定的,例如,$(this).hasClass("current")。如果你写!($(this).hasClass("current")),它的工作原理是一样的,也许对你更清楚。该表达意味着“如果这个对象没有'当前'类'”。

类“当前”是越来越由线添加到东西

$(this).addClass('column_active').addClass("current"); 
0

HTML DOM元素可以在同一时间有一个以上的类。这是否清除了事情?

1
$('#secondary_content_what_we_do li a') 

选择ALL a元件,其是一个li的后代,其本身与ID secondary_content_what_we_do元件的后代。所以这个选择器返回jQuery包装的DOM元素的数组

函数内部的this关键字是指触发事件(clickhover或其他)的 DOM元素。

$(this)只需重新包装了原生DOM this元素作为一个jQuery对象,所以我们可以访问诸如addClassremoveClass

所以jQuery函数...

$('#secondary_content_what_we_do li a').hover(function() { 
     if (!$(this).hasClass("current")) { 
      doSomething(); 
     } 
} 

,当我们将鼠标悬停在由选择匹配的任何元素essentialy是说,如果我们上空盘旋特定元素不有类current(在!操作反转hasClass调用的结果),然后做点什么。 。``$(本).addClass( 'column_active')addClass( “电流”):它被点击时

相关问题