我有一个 Web 应用程序，它允许您使用复选框选择各种家具，然后显示指向您可以使用该家具进行的练习的链接。当我使用 phonegap 时，我一直在尝试将 iScroll 用于勾选复选框时显示的 div。
Scroll div 与简单的
段落完美配合，但是当我尝试为复选框 div 添加代码时它不起作用。
JavaScript
//CHECKBOX SHOW/HIDE
function showHideChair(box,id)
{
var chairData = document.getElementById(id)
chairData.style.display = box.checked? "inline":"none"
}
function showHideMatt(box,id)
{
var mattData = document.getElementById(id)
mattData.style.display = box.checked? "inline":"none"
}
function showHideBook(box,id)
{
var bookData = document.getElementById(id)
bookData.style.display = box.checked? "inline":"none"
}
function showHideBunjee(box,id)
{
var bunjeeData = document.getElementById(id)
bunjeeData.style.display = box.checked? "inline":"none"
}
function showHideBottle(box,id)
{
var bottleData = document.getElementById(id)
bottleData.style.display = box.checked? "inline":"none"
}
var myScroll;
function loaded() {
myScroll = new IScroll('#wrapper');
}
HTML
<body onload="loaded()">
<header>
<h1>Home Fitness</h1>
</header>
<section>
<h3>Abdominals</h3>
</section>
<p>Please select the the equipment you have available from the choices</p>
<div class="container">
<form >
<div class="chairCheckbox">
<label for="chair">Chair</label>
<input style="display:inline" type="checkbox" id="chair" value="chair" name="option" onClick="showHideChair(this,'myChair')">
<label for "floorMatt">Floor Matt</label>
<input style="display:inline" type="checkbox" id="floorMatt" value="floorMatt" name="option" onClick="showHideMatt(this,'myMatt')">
<label for "book">Hard Back Book</label>
<input style="display:inline" type="checkbox" id="book" value="book" name="option" onClick="showHideBook(this,'myBook')">
<label for "bunji">Bunji Cord</label>
<input style="display:inline" type="checkbox" id="bunji" value="bunji" name="option" onClick="showHideBunjee(this,'myBunjee')">
<label for "bottle">Water Bottle</label>
<input style="display:inline" type="checkbox" id="bottle" value="bottle" name="option" onClick="showHideBottle(this,'myBottle')">
</div>
</form>
</div>
<div id="wrapper">
<div id="scroller">
<!--ABS CHAIR-->
<div id="myChair" style="display:none;">
<div class="subBanner" >
<h4>Chair</h4>
</div>
<a class="Exercisebutton icon chair" href="ChairCrunch.html"><span>Chair Crunch</span></a>
<a class="Exercisebutton icon chair" href="ElevatedCrunch.html"><span>Elevated Crunch</span></a>
</div>
<!--ABS MATT-->
<div id="myMatt" style="display:none;">
<div class="subBanner" >
<h4>Matt</h4>
</div>
<a class="Exercisebutton icon matt" href="BWLegRaises.html"><span>Bodyweight Leg Raises</span></a>
<a class="Exercisebutton icon matt" href="BWPlank.html"><span>Bodyweight Plank</span></a>
</div>
<!--ABS BOOK-->
<div id="myBook" style="display:none;">
<div class="subBanner" >
<h4>Book</h4>
</div>
<a class="Exercisebutton icon book" href="BookTwists.html"><span>Book Twists</span></a>
<a class="Exercisebutton icon book" href="BookBridge.html"><span>Book Bridge</span></a>
</div>
<!--ABS BUNJEE-->
<div id="myBunjee" style="display:none;">
<div class="subBanner" >
<h4>Bunjee</h4>
</div>
<a class="Exercisebutton icon bunjee" href="BCPLank.html"><span>Bunjee Cord Plank</span></a>
<a class="Exercisebutton icon bunjee" href="BCHipRaise.html"><span>Bunjee Cord Hip Raise</span></a>
</div>
<!--ABS BOTTLE-->
<div id="myBottle" style="display:none;">
<div class="subBanner" >
<h4>Bottle</h4>
</div>
<a class="Exercisebutton icon bottle" href="BSitup.html"><span>Bottle Situp</span></a>
<a class="Exercisebutton icon bottle" href="BSidePress.html"><span>Bottle Side Press</span></a>
</div>
</div>
</div>
CSS
/*ISCROLL*/
#wrapper {
position: relative;
width: 90%;
height: 300px;
overflow: hidden;
/* Prevent native touch events on Windows */
-ms-touch-action: none;
/* Prevent the callout on tap-hold and text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#scroller {
position: absolute;
/* Prevent elements to be highlighted on tap */
-webkit-tap-highlight-color: rgba(0,0,0,0);
/* Put the scroller into the HW Compositing layer right from the start */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
我知道这是很多代码，对不起!但任何帮助将不胜感激。!!
最佳答案
您的 HTML 有很多错误。包括输入标签在内的某些标签未关闭，标签标签语法不正确。例如:<label for "book">应该是 <label for="book">
您可以使用在线工具验证您的 HTML 代码，例如 http://validator.w3.org/check
看看这是否有助于您从错误中恢复
Iscroll 的调用类似于 myScroll = new iScroll('wrapper');
这是一个工作示例:http://lab.cubiq.org/iscroll/examples/simple/ 当然，用户遇到了很多关于 iScroll 困难的 SO 问题，请尝试这些问题，如果您仍然没有通过，请尝试一个带有复选框的简单示例，如果您遇到困难，请创建一个 jsfiddle 并将其发布在这里。我们可以提供帮助
关于javascript - Iscroll div 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21799003/