Question

使用导航栏处理个人项目。我正在使用jquery x.load（）将html页面加载到特定的div中。页面正确加载到div中。但是，其中一个是使用jquery flipswitch。我试图阅读这个翻转开关的状态，没有优势。我有一个主要的javascript文件，加载单个页面，这基本上是我的x.load（）。我有一个用于读取开关状态的工作jquery脚本，当直接放入开发人员控制台时可以正常工作。我已尝试将此代码内联到单个页面以及我的主要javascript文件中。当我将它放在单个页面中时，它有时会导致竞争条件的发展。

我正在寻找有关能够从各个页面阅读翻转开关状态的任何建议，建议或指示。

第一部分代码是我的javascript文件。代码的第二部分是我的个人页面，以及分别加载单个html页面的主html页面。

user_permissions

Answer 1

当您使用Flipswitch类型的jQuery Mobile checkbox时，您可以通过检查属性checked来获取状态。这是 jQuery Mobile Flipswitch游乐场：

＆＃13;

var cases = {false: "Unchecked", true: "Checked"};
  
function getStatus() {
  $("#statusLeft").html(cases[$("#LeftSwitch").prop("checked")]);
  $("#statusRight").html(cases[$("#RightSwitch").prop("checked")]);
}

$(document).on("change", "#LeftSwitch", function(e) {
  var status = $(this).prop("checked");
  $("#statusLeft").html("Changed to "+cases[status]);
});

$(document).on("change", "#RightSwitch", function(e) {
  var status = $(this).prop("checked");
  $("#statusRight").html("Changed to "+cases[status]);
});

function toggleLeft() {
  var status = $("#LeftSwitch").prop("checked");
  $("#LeftSwitch").prop("checked", !status).flipswitch("refresh");
}

function toggleRight() {
  var status = $("#RightSwitch").prop("checked");
  $("#RightSwitch").prop("checked", !status).flipswitch("refresh");
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div data-role="page" id="pageone">
      <div data-role="content">
        <form>
            <label for="LeftSwitch">Left Light:</label>
            <input type="checkbox" data-role="flipswitch" name="LeftSwitch" id="LeftSwitch">
            <span id="statusLeft">Unchecked</span>
            <br>
            <label for="RightSwitch">Right Light</label>
            <input type="checkbox" data-role="flipswitch" name="RightSwitch" id="RightSwitch">
            <span id="statusRight">Unchecked</span>
        </form>
        <button class="ui-btn" onclick="getStatus();">Get Status</button>
        <button class="ui-btn" onclick="toggleLeft();">Toggle Left</button>
        <button class="ui-btn" onclick="toggleRight();">Toggle Right</button>
      </div>
    </div>
  </body>
</html>

＆＃13;

使用change事件代替click，如果您在代码中设置状态，则会通知flipswitch切换。

附加说明：

关于您的定义＆＃34; 竞争条件＆＃34;我相信你指的是使用jQuery Mobile时常见的错误之一，即document.ready与页面事件。请阅读这篇文章here，并花一些时间在Omar这篇精彩的帖子中深入阅读整个故事：jQuery Mobile “Page” Events – What, Why, Where, When & How?（你会在这里找到一些有关此内容的其他有用的帖子主题）。

此外：您试图通过自己设置flipswtches类来手动更新ui-flipswitch-active，但我相信您会遇到保持状态和ui一致的问题。因此，您可以使用标准JQM方式更好地使用flipswitch设置flipswitch.refresh状态。我的代码片段中已经有一个示例。

最后一点：直到你强烈需要它 - 并且你知道如何对jQuery Mobile进行版本控制 - 请在你的所有文件中使用相同版本的库，所以在你的情况下我相信对jQuery 2.1 + JQM 1.4.5应该没问题。

Answer 2

＆＃13;

jQuery(document).ready(function() {
        var SideNav = $('.side-nav'),
            NavTrigger = $('.nav-trigger'),
            Content = $('.content'),
            ApartmentAlarm = $('#Alarm');

        $('.ui-flipswitch').click(function(){console.log($(this).hasClass('ui-flipswitch-active') ? 'On' : 'Off')});

        NavTrigger.on('click', function(event) {
            event.preventDefault();
            alert("click works");
            $([SideNav, NavTrigger]).toggleClass('nav-visible');
        });
        ApartmentAlarm.on('click', function() {
            //event.preventDefault();
            Content.load('alarm.html');
            $([SideNav, NavTrigger]).toggleClass('nav-visible');
        });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
        <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>

    <body>
        <form>
            <label for="LeftSwitch">Left Light:</label>
            <input type="checkbox" data-role="flipswitch" name="LeftSwitch" id="LeftSwitch">
            <br>
            <label for="RightSwitch">Right Light</label>
            <input type="checkbox" data-role="flipswitch" name="RightSwitch" id="RightSwitch">
        </form>
        <script type="text/javascript">
            $(document).ready(function() {
                console.log('hello');
                $('#LeftSwitch').on('flipswitchcreate', function(event, ui) {
                    alert('me')
                });
                //$('.ui-flipswitch').click(function(){console.log($(this).hasClass('ui-flipswitch-active') ? 'On' : 'Off')})
            })
        </script>
    </body>
    </html>

＆＃13;

从jquery .load（）加载html页面加载javascript时出现问题

2 个答案: