检测棘轮切换的状态变化答案

【问题标题】：Detect state change on a ratchet toggle检测棘轮切换的状态变化
【发布时间】：2015-12-12 05:18:56
【问题描述】：

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

（顺便说一句，在我添加到 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>

【问题讨论】：

标签： ratchet-2

【解决方案1】：

这行得通...

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

【讨论】：

【解决方案2】：

如果您想将切换作为复选框输入类型发布，您可以将切换和隐藏输入链接到表单中。

链接由输入的 id 和切换的 data-matcher 属性完成。

如果您正确设置了 id 和 data-matcher 标签，该脚本会将您的所有切换链接到输入。

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

        <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>

【讨论】：