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：

使用color-variants
将“选定”类添加到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() {});

而不是绑定事件监听器，如：

$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()的选项。

绑定事件的最佳方式？

1 个答案: