Question

我想在jQuery中使用一个开启的slidertype按钮。经过我得到了这个plugin。这是插件的fiddle链接。这是我的fiddle此插件的链接。现在你可以在我的小提琴链接中看到我有两个选项，如with和height设置，我想将这些值存储到我的数据库中，这样当我刷新页面时它将保持不变。因此，为了做到这一点，我将在完成一些更改后获取按钮值。但是在演示中你可以看到它只添加了一个名为on和off的类。当只有一个按钮（设置）时，可以使用它。但是如何使用多个设置（按钮）？所以任何帮助和建议都会非常可观。感谢

我的标记代码是这样的

Width Settings:
<select class="test">
  <option value="1">On</option>
  <option value="0">Off</option>
</select>
<br/>

Height Settings:
<select class="test1">
  <option value="1">On</option>
  <option value="0">Off</option>
</select>

和jQuery代码是这样的

$(function() {
    $('select').switchify();
    $('select').data('switch').bind('slide', function(e, type) {
    $('ul').append('<li>Switching ' + type); 
    });
    jQuery('.ui-switch-middle').live('click',function(){
      if(!jQuery('.ui-switch').hasClass('on')) {
      console.log('on');
    }
    else {
      console.log('off');
    }
    })

  });

Answer 1

为选择添加了ID，如下所示：

Width Settings:
<select id='widthSettings' class="test">
    <option value="1">On</option>
    <option value="0">Off</option>
</select>
<br/>Height Settings:
<select id='heightSettings' class="test1">
    <option value="1">On</option>
    <option value="0">Off</option>
</select>
<ul></ul>

javascript改变了：

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

请参阅JSFiddle了解工作示例

jQuery在多个按钮上滑动

1 个答案: