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

但代码仅适用于第一个选择。如果我分别用ids替换它，它可以正常工作：

$('#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数据设置 - * 属性。

switchify多个实例的绑定

1 个答案: