jquery - 绑定(bind)事件的最佳方式？

Question

我想做一个简单的皮肤切换器，html如下:

<ul id="switcher">
  <li class="skin selected">
    <a href="#">Skin 1</a>
    <ul class="color-variants">
      <li><label for="white"><input type="radio" name="skin" id="white" value="skin1-white" /></label></li>
      <li><label for="black"><input type="radio" name="skin" id="black" value="skin1-black" /></label></li>
    </ul>
  </li>
  <li class="skin no-variants">
    <label for="skin2">Skin 2</label>
    <input type="radio" name="skin" id="skin2" value="skin2" />
  </li>
</ul>

第一个皮肤通过选择一个颜色变化的单选按钮来激活，而第二个皮肤是带有没有变体的单选按钮的单个标签。

我需要 JS:

• 停止具有颜色变体的皮肤中的默认链接操作
• 将“selected”类添加到 li.skin 和颜色变化标签

我的代码:

var $switcher = $('#switcher');
$switcher.delegate('.skin a','click',function() { return false; })
.delegate('.color-variants label','click',function() {
  var $this = $(this);
  $switcher.find('.selected').removeClass('selected'); //remove all .selected
  $this.closest('.skin').addClass('selected'); // add .selected to .skin
  $this.parent().addClass('selected'); // add .selected to .color-variants label
})
.delegate('.novariants label','click',function() { 
  $switcher.find('.selected').removeClass('selected'); //remove all .selected
  $this.parent().addClass('selected'); // add .selected to skin
});

有什么方法可以提高代码性能吗？使用效率是否更高:

$switcher.delegate('.skin a','click',function() {}).
delegate('.color-variants label','click',function() {});

而不是绑定(bind)事件监听器，例如:

$switcher.find('.skin a').bind('click',function() {})
.end().find('.color-variants label').bind('click',function() {});

或者应该看起来像这样:

$switcher.find('.skin').delegate('a','click',function() {})
.end().find('.color-variants').delegate('label','click',function() {});

？

Answer 1

根据您拥有的 .skin a 元素数量，.delgate() 可能会更有效(我刚刚发现)。查看this test举个例子。

我只是选择第一个选项，避免 .find() 和 .end()。