switchify綁定多個實例

Question

我正在使用switchify（）爲我的切換開關。 我有我的HTMLS一對夫婦選擇的：

<select id="first"> 
<option value="on"> On </option> 
<option value="off"> Off </option> 
</select> 

<select id="second"> 
<option value="on"> On </option> 
<option value="off"> Off </option> 
</select> 

<select id="third"> 
<option value="on"> On </option> 
<option value="off"> Off </option> 
</select> 

，我希望當開關切換做一些事情。因此，這裏是jQuery代碼：

$('select').switchify().data('switch').bind('switch:slide', function(e,type){ 
// do something 
}); 

但代碼工作只爲第一選擇。而如果我的ID替換seprately，它工作正常：

$('#first').switchify().data('switch').bind('switch:slide', function(e,type){ 
// do something 
}); 

$('#second').switchify().data('switch').bind('switch:slide', function(e,type){ 
// do something 
}); 

$('#third').switchify().data('switch').bind('switch:slide', function(e,type){ 
// do something 
}); 

沒有任何人有任何想法是第一個版本的問題（注：標記名稱選擇或類選擇都具有相同的效果）？這是因爲在switchify（）中的一些問題？或者我錯過了什麼？它在過去的幾個小時裏讓我瘋狂！ ：/

我在做這個的jsfiddle例子來說明這個問題： http://jsfiddle.net/yTRJh/ 你可以看到，只有第一開關切換記錄！

Answer 1

你需要使用

$('select').switchify().each(function() { 
    $(this).data('switch').bind('switch:slide', function(e, type) { 
     $('ul').append('<li>Switching ' + type); 
    }); 
}); 

演示：Fiddle

這是因爲.data('switch')返回第一個選擇的data元素。

返回在對於 jQuery的集合中的第一個元素的命名數據存儲中的值，作爲由設置數據（名稱，值），或通過一個數據 - HTML5 * 屬性。