0

首先让我说我不是 JavaScript 程序员或 jQuery 大师，我实际上只是从 jQuery 开始。

我有以下两个 jQuery 代码：

$('.tipTrigger').hover(function(){
    $(this).toggleClass('active').prev('.tipText').stop(true, true).fadeToggle('fast'); 
});

和

if ($(".tooltip-container").length > 0){        
    $('.tipTrigger').hover(function(){
        $(this).toggleClass('active').prev('.tipText').stop(true, true).fadeToggle('fast'); 
    });
}

我对此有几个问题：

  1. 上面的两个代码基本上有什么区别？
  2. 是什么意思if ($(".tooltip-container").length > 0){？
  3. 使用上述内容有什么好处if吗？
  4. 从开发人员的角度来看，什么更“有效”？（也就是说，如果这么小的东西会以任何方式对性能产生相当大的影响）

对于这个简单的比较的任何其他评论/帮助将不胜感激。

提前致谢。

4

3 回答 3

4

第二个设置悬停功能仅当有一个或多个 DOM 元素与 class "tooltip-container"。

两者都遍历 DOM 以查找具有指定类的元素；效率上的差异是否值得取决于 DOM，何时调用语句等。

于 2012-04-27T15:48:07.840 回答
4
  1. 只有在以下情况下才会注册悬停功能...
  2. ...页面中至少有一个具有“工具提示容器”类的元素。
  3. 可能会有轻微的性能，除非这些工具提示的工作方式有一些我不知道的隐藏魔法。
  4. 如果它不会减慢速度或出错，我通常更喜欢更简洁的代码而不是微小的性能调整。
于 2012-04-27T15:49:30.540 回答
1

  • 上面的两个代码基本上有什么区别？

    第二个只会设置悬停功能，如果页面上有一个具有类“工具提示容器”的元素

  • if '($(".tooltip-container").length > 0){' 是什么意思？

    简单的 if 语句来测试tooltip-container文档上是否存在具有类的元素

  • 使用上述内容有什么好处if吗？

    简而言之，在这种情况下，不是真的，因为除非存在具有类的元素，否则不会分配 .hover tipTrigger。这也可能导致性能问题，因为它只检查一个tooltip-container元素是否存在。如果这是一项确保tipTrigger“在”所述容器“内部”的检查，它将失败，因为一旦tooltip-container找到一个带有的元素，所有带有tipTrigger悬停功能的元素都将被分配，这可能是不希望的。

  • 从开发人员的角度来看，什么更“有效”？（也就是说，如果这么小的东西会以任何方式对性能产生相当大的影响）

    如果您必须检查以确保只有tipTrigger元素内tooltip-container的元素被触发，您可以考虑使用 jQuery 的.each 函数或在选择器中使用 CSS，如下所示

>

$('.tooltip-container .tipTrigger').hover(function(){
    $(this).toggleClass('active').prev('.tipText').stop(true, true).fadeToggle('fast'); 
});

为了进一步了解

  • .toggleClass : 在此元素上活动的切换类
  • .prev：将链移动到引用具有tipText在 dom 中当前元素之前的类的元素
  • .stop : 停止该元素上的任何电流变化
  • .fadeToggle：将开始将元素淡入“隐藏”
于 2012-04-27T15:58:08.867 回答