Question

我无法弄清楚你是如何检测用户在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>

Answer 1

这有效......

{{1}}

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

检测棘轮扳钮上的状态变化

2 个答案: