Question

我尝试过这个但我认为这是jquery的一个问题，我的cloud9事情说'$未定义'

       <div class="wanted"> <!-- Toggle Lowercase -->
        <label class="input-toggle">
         <input type="checkbox" id="isAgeSelected" checked>
          <span></span>
        </label>
       </div>
         <p>  Upper Lower Case Mix</p>

      <div class="hide">

         <div id="txtAge" style="display:none">
          <div class="wanted"> <!-- Toggle Uppercase -->
           <label class="input-toggle">
            <input type="checkbox" id="uppercase" checked>
             <span id="randomString"></span>
           </label>

           <p id="test1">Uppercase</p>
         </div>

Jquery的

$('#isAgeSelected').change(function() {
    $("#hide").toggle(this.checked);
 });

Answer 1

如果你的cloud9“事物”是说没有定义$那么你要么不在文档中包含jquery库，要么不将代码包装在文档就绪语句中，并且浏览器试图过早地执行代码。

您需要包含jquery库：来自本地文件 - 例如：

<script src="js/jquery-2.1.1.js"></script>

或来自CDN - 例如：

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

然后你需要将jquery包装在document ready语句中，以确保在绑定执行jquery命令之前已加载库：

$(document).ready(function(){
     $('#isAgeSelected').change(function() {
        $("#hide").toggle(this.checked);
     });
});

然后你有一个带有“hide”类的div，但是你试图在你的代码中修改ID为“hide”的元素。这些必须是相同的：

$("#hide").toggle(this.checked);

应该是

$(".hide").toggle(this.checked);

或将div更改为：

<div id="hide">

用复选框隐藏div

1 个答案: