イベントをバインドする最も良い方法は？

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が必要になります。

• が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

あなたが持っている要素の数によっては、.delgate()がもっと効率的かもしれません。例としてthis testをチェックしてください。

私はちょうど.find()と.end()の両方を避ける最初のオプションを使用します。