Question

我有一个网络应用程序，您可以使用复选框选择各种家具，然后显示您可以使用该家具进行的练习的链接。当我使用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);
 }

我明白这是很多代码，对不起！但任何帮助都会非常感激。!!

Answer 1

你的HTML有很多错误。包含输入标签的一些标签未关闭，标签标签不是语法正确的。例如：<label for "book">应为<label for="book">

您可以使用http://validator.w3.org/check

等在线工具验证HTML代码

看看这是否有助于您从错误中恢复

调用Iscroll，如myScroll = new iScroll('wrapper');

以下是一个工作示例：http://lab.cubiq.org/iscroll/examples/simple/ 对于用户遇到的iScroll难题，有很多SO问题，请尝试一下，如果你没有通过，请尝试一个带复选框的简单示例，如果你遇到困难，请创建一个jsfiddle并在此处发布。我们可以帮忙

Iscroll div不工作

1 个答案: