0

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

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

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

4 回答 4

4

我会用 CSS 做到这一点：

[class^="editable"]:hover {
    border: 3px dashed #a7a7a7;
}
于 2013-08-27T10:56:38.610 回答
3

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

$('[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');
});

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

于 2013-08-27T10:55:37.783 回答
1

最好的方法是 CSS，因为它在样式和脚本的分离方面更快、更一致，而且 js 正在消耗你的资源。但是如果您需要支持 IE6 或更低版本，则不能使用 :hover :) 

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

.editable:hover
{
   border: 3px dashed #a7a7a7;
}
于 2013-08-27T11:05:55.893 回答
0

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

$('[class^="editable"]').hover(function(){
    $(this).css('border','3px dashed #a7a7a7');
}, function () {
    $(this).css('border','0px dashed #ffffff');
});
于 2013-08-27T10:57:31.727 回答