переключить привязку для нескольких экземпляров

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 
}); 

но код работает только для первого выбора. Хотя, если я заменю его с идентификаторами 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 данных- * атрибут.