Iscroll div不起作用

Question

我有一个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);
 }

我了解这是很多代码，对不起！ 但任何帮助将不胜感激。

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 个解决方案

解决方案1
0 2014-02-15 15:54:28

Iscroll div不起作用

问题描述

1 个解决方案

解决方案1 0 2014-02-15 15:54:28

解决方案1
0 2014-02-15 15:54:28