检测棘轮开关上的状态变化

Question

我无法弄清楚您是如何检测到用户在 javascript 中更改棘轮切换元件的。在下面的代码中，我可以检测到点击切换按钮，但如果用户滑动切换按钮，它就不起作用。是否有检测切换状态变化的标准正确方法？（文档 link 在这里就可以了——我找不到任何东西）。

（顺便说一句，在添加到 Cordova 项目之前，我目前只是运行在 firefox 浏览器中评估 Ratchet。）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ratchet template page</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <link href="/My_Webs/experiments/cordova/ratchet-example/css/ratchet.css" rel="stylesheet">
    <link href="/My_Webs/experiments/cordova/ratchet-example/css/ratchet-theme-ios.css" rel="stylesheet">
    <script src="/My_Webs/experiments/cordova/ratchet-example/js/ratchet.js"></script>
    <script src="/My_Webs/experiments/cordova/ratchet-example/js/jquery-1.11.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("body").on(
                "click",
                "#toggle1",
                function(e){
                console.log("toggle1 clicked " + $("#toggle1 .toggle").hasClass("active"));
            });

        });
    </script>
  </head>

  <body>
    <div class="content">
        <ul class="table-view">
          <li class="table-view-cell" id="toggle1">
            Item 1
            <div class="toggle">
              <div class="toggle-handle"></div>
            </div>
          </li>
          </li>
        </ul>
    </div>
</body>

Answer 1

这有效...

        document
            .addEventListener(
                'toggle',
                function( e ){
                    console.log(
                        $(e.target).parent().attr("id") + ", " +
                        $(e.target).hasClass("active")
                    );
                }
            );

Answer 2

如果您想 post 切换作为复选框输入类型，您可以 link 切换和隐藏输入到您的表单中。

link 由输入的 id 和切换的数据匹配器属性完成。

如果您已正确设置 id 和 data-matcher 标签，该脚本将 link 所有切换到输入。

以下脚本会将切换状态复制到输入。

        <input style="visibility: hidden" type="checkbox" value="" id="accept_cgu">
        <ul class="table-view">
            <li class="table-view-cell">
                Accepter les termes des CGU *
                <div class="toggle" data-matcher="accept_cgu">
                    <div class="toggle-handle"></div>
                </div>
            </li>
        </ul>

    <script>
        $( document ).ready(function() {
            $('.toggle').on('toggle', function (event) {
                var inactive_ids = [];
                var active_ids = [];
                $('.toggle').each(function () {
                    if ($(this).hasClass("active")) {
                        active_ids.push($(this).attr("data-matcher"))
                    } else {
                        inactive_ids.push($(this).attr("data-matcher"))
                    }
                });
                $.each(active_ids, function (key, value) {
                    $('#' + value).prop('checked', true);
                });
                $.each(inactive_ids, function (key, value) {
                    $('#' + value).prop('checked', false);
                });
            });
        });
    </script>

检测棘轮开关上的状态变化

Detect state change on a ratchet toggle

ratchet-2