我如何翻转切换按钮的jQuery功能

Question

以下功能做一个jQuery Mobile网站一样的东西，翻页切换按钮，在使用它。

<script> 
    function updateControls() { 
     $.getJSON('/status.json', function(json) { 
      $.each(json, function(key, value) { 
       $('#'+key).val(value).slider('refresh'); 
      }); 
     }); 
    } 

    $('select').bind('change', function(event) { 
     element = event.target.id; 
     if (element.substr(0, 6) == 'outlet') { 
      eleid = element.substr(6, 2); 
     } 
     else { 
      eleid = 0; 
     } 

     command = event.target.value; 
     $.get('/cmd', { 'eleid' : eleid, 'cmd' : command }); 
    }); 
    $('#page1').bind('pageinit', updateControls); 
</script> 

Answer 1

内 document.ready

裹代码也使用.on代替.bind as .bind已弃用。

$('#page1').on('pageinit', updateControls); 

Answer 2

代码的改编版：

<script> 
    function updateControls() { 
     $.getJSON('/status.json', function (json) { 
      $.each(json, function (key, value) { 
       $('#' + key).val(value).slider('refresh'); 
      }); 
     }); 
    } 

    $('select').on('change', function (event) { 
     element = event.target.id; 
     if (element.substr(0, 6) == 'outlet') { 
      eleid = element.substr(6, 2); 
     } else { 
      eleid = 0; 
     } 

     command = event.target.value; 
     $.get('/cmd', { 
      'eleid': eleid, 
      'cmd': command 
     }); 
    }); 
    $(document).ready(function() { 
     updateControls(); 
    }); 
</script> 

编辑

如果你想要做的提交按钮作为与选择相同，代码将是：

<script> 
    function updateControls() { 
     $.getJSON('/status.json', function (json) { 
      $.each(json, function (key, value) { 
       $('#' + key).val(value).slider('refresh'); 
      }); 
     }); 
    } 

    $('select').on('change', function (event) { 
     element = event.target.id; 
     if (element.substr(0, 6) == 'outlet') { 
      eleid = element.substr(6, 2); 
     } else { 
      eleid = 0; 
     } 

     command = event.target.value; 
     $.get('/cmd', { 
      'eleid': eleid, 
      'cmd': command 
     }); 
    }); 


    $('input[type=submit]').on('click', function (event) { 
     element = event.target.id; 
     if (element.substr(0, 6) == 'outlet') { 
      eleid = element.substr(6, 2); 
     } else { 
      eleid = 0; 
     } 
     command = event.target.value; 
     $.get('/cmd', { 
      'eleid': eleid, 
      'cmd': command 
     }); 

     $(document).ready(function() { 
      updateControls(); 
     }); 
</script> 

编辑2

如果你想活动按钮点击的情况发生：

<script> 
    function updateControls() { 
     $.getJSON('/status.json', function (json) { 
      $.each(json, function (key, value) { 
       $('#' + key).val(value).slider('refresh'); 
      }); 
     }); 
    } 

    $('select').on('change', function (event) { 
     element = event.target.id; 
     if (element.substr(0, 6) == 'outlet') { 
      eleid = element.substr(6, 2); 
     } else { 
      eleid = 0; 
     } 

     command = event.target.value; 
     $.get('/cmd', { 
      'eleid': eleid, 
      'cmd': command 
     }); 
    }); 


    $('input[type=submit]').on('click', function (event) { 
     updateControls(); 
    }); 
</script>