如何将切换按钮翻转为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，因为.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>