Question

有没有更好的方法来编写以下代码？

我正在使用Aloha编辑器，在我的jQuery中，任何具有可编辑类的元素将在鼠标悬停时获得3px虚线边框，下面的代码工作正常，我只是想知道是否有“最佳实践或“编写此代码的更好方法：

 $(function(){
  $('[class^="editable"]').mouseover(function(){
      $(this).css('border','3px dashed #a7a7a7');
  });
  $('[class^="editable"]').mouseout(function(){
      $(this).css('border','0px dashed #ffffff');
  });
});

Answer 1

我会用CSS做到这一点：

[class^="editable"]:hover {
    border: 3px dashed #a7a7a7;
}

Answer 2

通过链接方法避免使用相同的选择器调用$()：

$('[class^="editable"]').mouseover(function(){
  $(this).css('border','3px dashed #a7a7a7');
}).mouseout(function(){
  $(this).css('border','0px dashed #ffffff');
});

而不是添加特定的CSS将这些设置作为类添加到样式表中，然后添加和删除该类：

$('[class^="editable"]').mouseover(function(){
  $(this).addClass('hovered');
}).mouseout(function(){
  $(this).removeClass('hovered');
});

（...其中元素的默认样式将根据您在鼠标中设置的内容进行定义。）

Answer 3

最好的方法是使用CSS，因为它更快，更有利于分离样式和脚本，js也在消耗你的资源。但是如果你需要支持IE6或更低版本，则无法使用：hover :)

.editable
{
   border: 0px dashed #fff;
}

.editable:hover
{
   border: 3px dashed #a7a7a7;
}

Answer 4

使用hover，它允许您将第二个函数指定为参数，从而不再选择元素：

$('[class^="editable"]').hover(function(){
    $(this).css('border','3px dashed #a7a7a7');
}, function () {
    $(this).css('border','0px dashed #ffffff');
});

JQuery mouseover / mouseout功能 - 更好的代码？

4 个答案: