个人中心
gpt4 book ai didi

javascript - 在从 jquery .load() 加载 html 页面时加载 javascript 时遇到问题

转载 作者：行者123 更新时间：2023-12-03 03:34:56 25 4
gpt4 key购买 nike

使用导航栏处理个人项目。我正在使用 jquery x.load() 将 html 页面加载到特定的 div 中。页面正确加载到 div 中。然而，其中之一是使用 jquery Flipswitch。我试图读取这个翻转开关的状态，但没有成功。我有一个加载各个页面的主要 javascript 文件，这基本上就是我的 x.load()。我有一个用于读取开关状态的工作 jquery 脚本，当直接放入开发人员控制台时该脚本可以工作。我尝试将此代码内联到单个页面以及我的主 javascript 文件中。当我将其放置在单个页面中时，有时会导致出现竞争状况。

我正在寻找有关能够从各个页面读取翻转开关状态的任何建议、意见或指导。

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

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');
});



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



<html>

<head>
    <title>

    </title>
    <link rel="stylesheet" href="apt.css">
</head>

<body>
    <header class="page-header">
        <div class="apartment-name">Carlson Casa</div>
        <div class="data-top">
            <ul class="top-data">
                <li>Time</li>
                <li>Outside Temp</li>
                <li>Inside Temp</li>
                <li><a href="#0" class="nav-trigger">Menu<span></span></a></li>
            </ul>
        </div>
    </header>
    <main class="main-content">
        <nav class="side-nav">
            <ul>
                <li><a href="#">Apartment</a></li>
                <li class="nav-label">Living Room</li>
                <li><a href="#" id="Alarm">Alarm control</a></li>
                <li><a href="#" id="Chandelier">Chandelier</a></li>
                <li class="nav-label">Bedroom</li>
                <li><a href="#" id="BedroomLights">Lights</a></li>
                <li><a href="#" id="AlarmClock">Alarm Clock</a></li>
            </ul>
        </nav>
        <div class="content">
            Controls go here
        </div>
    </main>
    <script src="jquery-2.1.4.js"></script>
    <script src="main.js"></script>

</body>

</html>

最佳答案

由于您使用 checkbox 类型的 jQuery Mobile Flipswitch，您可以通过检查属性 checked 来获取状态。这是一个 jQuery Mobile Flipswitch Playground :

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");
}
<!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>

通过使用 change 事件而不是 click，如果您在代码中设置状态，您也会收到 flipswitch 切换的通知。

附加说明:

关于您定义的“竞争条件”，我相信您指的是使用 jQuery Mobile 时常见的错误之一，即 document.ready 与 >页面事件。请阅读这篇文章here ，并花一些时间深入阅读 Omar 这篇伟大文章中的整个故事。这里:jQuery Mobile “Page” Events – What, Why, Where, When & How? (您可以在这里找到有关此主题的其他一些有用的帖子)。

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

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

关于javascript - 在从 jquery .load() 加载 html 页面时加载 javascript 时遇到问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45911224/

25 4 0
文章推荐： javascript - 字符串数据类型占用多少数据？
文章推荐： math - 我应该在数学游戏中使用表达式解析器吗？
文章推荐： asp.net - 如何修复 ASP.NET 错误 "The file ' nnn.aspx' 尚未预编译，无法请求。”？
文章推荐： javascript - 使用 PHP 和 AJAX 提交单选按钮
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com