Лучший способ связать события?

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>

1-й скин активируется при выборе одной из цветовых переключателей, в то время как второй - это одна меткас переключателем без вариантов.

Мне нужен 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() {});

вместо привязки слушателей событий, таких как:

$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() может быть более эффективным (кое-что, что я только что узнал).Посмотрите этот тест в качестве примера.

Я бы просто выбрал первый вариант, который избегает как .find(), так и .end().