使用导航栏处理个人项目。我正在使用 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/