关键词：
【中文标题】检查包含字符串的 li 项时，我的混合应用程序不会更改页面【英文标题】：My hybrid app wont change pages when checking li item which contains a string 【发布时间】：2017-01-02 13:32:07 【问题描述】：对于我正在进行的项目，我想让我的混合应用程序（phonegap）在应用程序检测到来自 Arduino 的 BluetoothLE 信号时切换屏幕。为此，我通过几个列表项进行了代码循环，并且检查 li 项的内容与“TEST123”（我给 Arduino 的名称）相同。如果这些相同，则应用程序应切换到另一个页面。我在 GitHub 上编辑了名为“cordova-plugin-ble-central”的代码，由 Don Coleman 制作。
我编写了代码，因此它可以滚动浏览 ul 中的 li 项目，读取内容并在字符串与“TEST123”相同的情况下调用连接函数，但我的页面似乎没有切换。
感谢您的帮助！
HTML：
<body>
<div class="app">
<h1>BluefruitLE</h1>
<div id="mainPage" class="show">
<ul id="deviceList">
</ul>
<button id="refreshButton">Refresh</button>
</div>
<div id="detailPage" class="hide">
<div id="resultDiv"></div>
<div>
<input type="text" id="messageInput" value="Hello"/>
<button id="sendButton">Send</button>
</div>
<button id="disconnectButton">Disconnect</button>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
CSS：
body
font-family: "Helvetica Neue";
font-weight: lighter;
color: #2a2a2a;
background-color: #f0f0ff;
-webkit-appearance: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none; -webkit-user-select: none;
button
margin: 15px;
-webkit-appearance:none;
font-size: 1.2em;
#mainPage
text-align:center;
width: 100vw;
height: 100vh;
#detailPage
text-align:center;
font-size: 2em;
width: 100vw;
height: 100vh;
background-color: red;
button
-webkit-appearance: none;
font-size: 1.5em;
border-radius: 0;
#resultDiv
font: 16px "Source Sans", helvetica, arial, sans-serif;
font-weight: 200;
display: block;
-webkit-border-radius: 6px;
width: 100%;
height: 140px;
text-align: left;
overflow: auto;
#mainPage.show
display: block;
#mainPage.hide
display: none;
#detailPage.show
display: block;
#detailPage.hide
display: none;
当然还有我的 JavaScript：
'use strict';
// ASCII only
function bytesToString(buffer)
return String.fromCharCode.apply(null, new Uint8Array(buffer));
// ASCII only
function stringToBytes(string)
var array = new Uint8Array(string.length);
for (var i = 0, l = string.length; i < l; i++)
array[i] = string.charCodeAt(i);
return array.buffer;
// this is Nordic's UART service
var bluefruit =
serviceUUID: '6e400001-b5a3-f393-e0a9-e50e24dcca9e',
txCharacteristic: '6e400002-b5a3-f393-e0a9-e50e24dcca9e', // transmit is from the phone's perspective
rxCharacteristic: '6e400003-b5a3-f393-e0a9-e50e24dcca9e' // receive is from the phone's perspective
;
var app =
initialize: function()
this.bindEvents();
detailPage.hidden = true;
//ale paginas hidden behalve login
,
bindEvents: function()
document.addEventListener('deviceready', this.onDeviceReady, false);
refreshButton.addEventListener('touchstart', this.refreshDeviceList, false);
sendButton.addEventListener('click', this.sendData, false);
disconnectButton.addEventListener('touchstart', this.disconnect, false);
deviceList.addEventListener('touchstart', this.connect, false); // assume not scrolling
,
onDeviceReady: function()
app.refreshDeviceList();
,
refreshDeviceList: function()
deviceList.innerHTML = ''; // empties the list
if (cordova.platformId === 'android') // Android filtering is broken
ble.scan([], 5, app.onDiscoverDevice, app.onError);
else
ble.scan([bluefruit.serviceUUID], 5, app.onDiscoverDevice, app.onError);
,
onDiscoverDevice: function(device)
var listItem = document.createElement('li'),
html = '<b>' + device.name + '</b><br/>' +
'RSSI: ' + device.rssi + ' | ' +
device.id;
listItem.dataset.deviceId = device.id;
listItem.innerHTML = html;
deviceList.appendChild(listItem);
,
ulScroll: function()
var ul = document.getElementById("deviceList");
var items = ul.getElementsByTagName("li");
for (var i = 0; i < items.length; i++)
if ((items.textContent || items.innerText) == "TEST123")
connect: function(e)
var deviceId = e.target.dataset.deviceId,
onConnect = function(peripheral)
app.determineWriteType(peripheral);
// subscribe for incoming data
ble.startNotification(deviceId, bluefruit.serviceUUID, bluefruit.rxCharacteristic, app.onData, app.onError);
sendButton.dataset.deviceId = deviceId;
disconnectButton.dataset.deviceId = deviceId;
resultDiv.innerHTML = "";
app.showDetailPage();
;
ble.connect(deviceId, onConnect, app.onError);
,
disconnect: function(event)
var deviceId = event.target.dataset.deviceId;
ble.disconnect(deviceId, app.showMainPage, app.onError);
,
showMainPage: function()
document.getElementById("mainPage").className = "show";
document.getElementById("detailPage").className = "hide";
,
showDetailPage: function()
document.getElementById("detailPage").className = "show";
document.getElementById("mainPage").className = "hide";
,
onError: function(reason)
alert("ERROR: " + reason);
;
附：非常抱歉没有组织的代码
【问题讨论】：
connect:function(e) 在函数内部应该做什么？那是对象语法！！ 我对此比较陌生，您能解释一下您的意思吗？我猜是我应该在那里调用函数并将connect：函数放在函数之外 deviceList 未定义，对我来说，将函数输出写入 html，然后从中解析回来是没有意义的。这不符合所有逻辑...... 整个结构没有意义，可以从头重写，学好js再写copy+paste代码... 将函数输出到 html 是我们在课堂上的想法，这对我来说也很奇怪。 deviceList 是我从 github 编辑的代码中获得的。我看不出它做了什么，并想出了一个解决方案 【参考方案1】：我将如何构建代码：
var app=
devices:[], //thats were the devices are stored
onDeviceReady:refreshDeviceList,
refreshDeviceList: function()
deviceList.innerHTML = ''; // empties the list
this.devices=[];
if (cordova.platformId === 'android') // Android filtering is broken
ble.scan([], 5, app.onDiscoverDevice, app.onError);
else
ble.scan([bluefruit.serviceUUID], 5, app.onDiscoverDevice, app.onError);
//all devices checked, lets search ours:
var my=this.devices.find(device => device.name=="TEST123");
if(my)
ble.connect(my.id,app.onconnect,errorhandling);
else
alert("my device not found");
,
onDiscoverDevice: function(device)
//add to html
var listItem = document.createElement('li'),
html = '<b>' + device.name + '</b><br/>' +
'RSSI: ' + device.rssi + ' | ' +
device.id;
listItem.innerHTML = html;
deviceList.appendChild(listItem);
//add to devices:
this.devices.push(device);
,
onconnect:function(e)
//your connect function
补充说明：
refreshButton etc are undefined. You need to find them:
var refreshButton=document.getElementById("refreshButton");
【讨论】：
我正在摆脱刷新按钮等，因为我希望在找到信号时进行切换。我看到了重组，并为此感谢！我将检查代码是否以这种方式工作，以及何时修复代码中当前存在的错误。 我猜 onconnect 函数应该包含 app.showDetailPage();但这似乎不起作用。我也尝试了代码的连接部分，但这似乎也不起作用。我看到你已经使用了触发onconnect功能的ble.connect，对吗？因为如果那是真的，我认为 app.ShowDetailPage ();应该足够了。 没错，没错 如果我认为您的新结构化代码涵盖了从 refreshdevicelist 到断开功能的旧代码，我是对的吗？因为如果那是真的，我想我可能犯了另一个错误，因此屏幕不会切换 我的代码只涵盖了设备刷新/连接的内容，而您的代码中完全错误仅当字符串包含匹配项时才替换字符串周围的标签
】仅当字符串包含匹配项时才替换字符串周围的标签【英文标题】：Replacetagssurroundingstringonlyifstringcontainsmatch【发布时间】：2021-10-3106:10:30【问题描述】：我有一个包含许多行的文件，其中包含被标签包围的字符串。<tag:identifi... 查看详情
点击 NavigationBar 和 NavigationBar 项时 UIPopoverController 不会关闭
...：2013-03-1413:19:56【问题描述】：我是ios的新手。我有一个包含多个按钮的导航栏，包括一个后退按钮、排序、过滤器、设置 查看详情
Arraylist.contains 不会检查字符串
】Arraylist.contains不会检查字符串【英文标题】：Arraylist.containswon\'tcheckstring【发布时间】：2015-02-1319:15:21【问题描述】：我想构建一个程序，该程序通过扫描仪输入一组字符串(intT)，并将它们存储在数组列表中。然后我想检查输... 查看详情
PyMySQL：当我的列表输入超过一项时收到错误“操作数应包含 1 列”
...PyMySQL：当我的列表输入超过一项时收到错误“操作数应包含1列”【英文标题】：PyMySQL:Receivingtheerror"Operandshouldcontain1column(s)"whenmylistinputsexceedoneitem【发布时间】：2021-10-0211:24:35【问题描述】：我有两个列表，input_algorithm... 查看详情
注入单例依赖项时，HttpContext 为空
...时间】：2021-07-1119:45:27【问题描述】：我希望在我的Blazor应用程序中创建一个全局类，该类包含一个函数，该函数通过我从Windows身份验证获得的用户用户名获取用户的部门，但我似乎无法通过我的全局访问HttpContextAccessor班级。... 查看详情
如何检查字符串是不是已包含 Swift 中的字符 [重复]
...53【问题描述】：如果textField中已有-字符，我想检查我的应用程序。我该怎么做？【问题讨论】：需要更多解释您的问题吗？实际上你想在哪里检查键 查看详情
如何在使用 itertools.groupby 删除重复项时包含每个字符的计数
】如何在使用itertools.groupby删除重复项时包含每个字符的计数【英文标题】：Howtoincludethecountsforeachcharacterwhileremovingtheduplicatesusingitertools.groupby【发布时间】：2017-03-0709:03:41【问题描述】：我有以下代码：df=pd.DataFrame(data=all_r_1.to_d... 查看详情
PHP：检查我的字符串是不是只包含数字和“X”字符
】PHP：检查我的字符串是不是只包含数字和“X”字符【英文标题】：PHP:Checkifmystringonlycontainsnumbersand"X"characterPHP：检查我的字符串是否只包含数字和“X”字符【发布时间】：2017-06-0116:01:13【问题描述】：我检索我的尺寸... 查看详情
获取看起来像包含多个混合词的字符串的记录
】获取看起来像包含多个混合词的字符串的记录【英文标题】：Getrecordsthatlooklikeastringwithseveralmixedwords【发布时间】：2012-12-1410:00:32【问题描述】：数据库类型：MySql假设我的表格中有两行这样的：[1.]“彼得昨天去了公园”[2.]“... 查看详情
如何对包含多个字符串的结构应用基数排序（使用计数排序）
】如何对包含多个字符串的结构应用基数排序（使用计数排序）【英文标题】：Howtoapplyradixsort(usescountingsort)withstructcontainingmultiplestrings【发布时间】：2020-03-0511:33:01【问题描述】：我想用基数排序按字母顺序对结构字符串进行排... 查看详情
python：如何判断列表中的元素是否包含某个数字？(代码片段)
...列表推导，我们通过li的元素，将值转换为str。然后检查字符串中是否为'3'（或您想要的任何值）。此操作的结 查看详情
LINQ，检查此字符是不是包含在我的数据库中的某些表中
】LINQ，检查此字符是不是包含在我的数据库中的某些表中【英文标题】：LINQ,tocheckifthischaracterscontainsinmysometablesinmyDBLINQ，检查此字符是否包含在我的数据库中的某些表中【发布时间】：2021-10-3013:48:24【问题描述】：varunos=newList&l... 查看详情
尝试检查依赖项时 rosdep 出现问题
】尝试检查依赖项时rosdep出现问题【英文标题】：Problemwithrosdepwhentryingtocheckfordependencies【发布时间】：2021-06-2913:31:15【问题描述】：我正在尝试运行以下rosdep命令来检查我的ROS2包中是否缺少依赖项：rosdepinstall-i--from-pathsrc--rosdis... 查看详情
将 UIView (Overlay) 与应用背景混合
...模式）将UIView与我的应用背景混合。但是，要混合的视图包含在复杂的视图层次结构中。可以使用view.layer.compositingFilter="overlayBlendMode& 查看详情
检查列表是不是包含特定字符串，问题[关闭]
】检查列表是不是包含特定字符串，问题[关闭]【英文标题】：CheckifListContainsSpecificString,Problem[closed]检查列表是否包含特定字符串，问题[关闭]【发布时间】：2019-01-0415:13:30【问题描述】：在使用我的SeleniumPython程序时，我试图... 查看详情
li 不会在 IE 中正确浮动
...）。基本上我在一个固定宽度的div中有一个列表。该列表包含没有高度或宽度的li单元格，其中包含一个链接和一个样式化的span标签。li单元格应该向右浮动，span标签相对于<a>向右浮动问题，IE无法处理。而且 查看详情
javascriptxpath命令不会在每次运行时与seleniumjava程序混合运行
...elenium中混合在一起）未成功运行xpath命令每次运行。但是我的Java命令成功运行，这是我遇到问题的xpath。（换句话说，有时xpath命令成功运行，而在其他时候则没有）。我将jdk从13更改为jdk8，但这没有用。我不知道需要什么。我... 查看详情
如何检查数组是不是包含Javascript中的字符串？
】如何检查数组是不是包含Javascript中的字符串？【英文标题】：HowtocheckanarrayifitcontainsastringinJavascript?如何检查数组是否包含Javascript中的字符串？【发布时间】：2013-07-1012:19:37【问题描述】：我有一个包含字符串的数组。varjs_use... 查看详情