0

我正在使用 jQuery 自定义样式默认选择框。除了隐藏它并用 div 元素覆盖之外，我还添加了一个悬停功能。基本上它可以工作，虽然我还没有在所有主流浏览器中测试过它，我可能不得不为 IE6 构建一个后备（谁还在使用它？）。

由于我只是一个初学者，我想知道是否可以以任何方式优化此代码。谢谢！

$("select").each(function(){
   $(this).wrap('<div class="sbox"/>');
   $(this).after("<span class='sboxtext'></span><span class='sboxarrow'></span>");
   $(".sbox").hover( function (e) {
     $(this).toggleClass('sbox-over');
     $(this).find("span.sboxarrow").toggleClass('sboxarrow-over');
   });
   var val = $(this).children("option:selected").text();
   $(this).next(".sboxtext").text(val);
   $(this).change(function(){
     var val = $(this).children("option:selected").text();
     $(this).next(".sboxtext").text(val);
   });
});
4

2 回答 2

0

dom 操作在循环中非常昂贵，因此您必须分离元素。

var selectbox = $("select").detach();

并对选择​​框执行操作。

于 2013-07-01T10:38:41.283 回答
0

不需要使用each方法，jQuery在幕后遍历选中的元素。如果您使用的是 jQuery 1.9-，您的代码也适用于旧版本的 IE。

$("select").wrap('<div class="sbox"/>')
           .after("<span class='sboxtext'></span><span class='sboxarrow'></span>")
           .parent()
           .hover(function() {
               $(this).toggleClass('sbox-over')
                      .find(".sboxarrow")
                      .toggleClass('sboxarrow-over');
           }).end()
           .change(function() {
               var $this = $(this),
                   val = $this.children("option:selected").text();
               $this.next().text(val);
           }).change();
  • 缓存对象
  • 使用 jQuery 提供的可链接性
于 2013-07-01T10:39:16.627 回答