问题与jQuery代码显示和隐藏div

我有一个小脚本，显示一个复选框，选中时，它显示一个选择列表。这在jsfiddle中可以正常工作，但在网页上使用时不会。问题与jQuery代码显示和隐藏div

该网页只包含与jsfiddle相同的代码，不多不少。

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

<script type="text/javascript"> 
$(".depository").hide(); 
$("#ImageSelection_0").click(function() { 
    if($(this).is(":checked")) { 
     $(".depository").show(); 
    } else { 
     $(".depository").hide(); 
    } 
}); 
</script> 

Image depository: <input type="checkbox" name="ImageSelection" value="1" id="ImageSelection_0" /> 
Local image: <input type="checkbox" name="ImageSelection" value="2" id="ImageSelection_1" /> 


<div class="depository"> 
<select name="CompanyName" id="name" onChange="get();" class="imaindatesel"> 
    <option value="0">Select...</option> 

    <option value="1">Test 1</option> 
    <option value="2">Test 2</option> 
    <option value="3">Test 3</option> 

</select> 
</div>

的SJFiddle：https://jsfiddle.net/Blackbox/mLvtmhrm/

任何人都可以明白为什么这不我的网页上运行？

非常感谢您的意见。

来源

2015-10-27 DCJones

你能告诉我们实际的网站吗？（因为这是问题所在） – indubitablee

在网页中会发生什么？控制台中有任何错误吗？用'docuement.ready'包装你的代码。 – Manwal

如果这是它在您的网站上订购的方式，则问题在于，当该脚本块运行时，ImageSelection_0不存在*。在jsFiddle中，脚本不会运行，直到后来，在'onLoad'时间。将你的脚本移动到'$（document）.ready（）'处理程序，或者至少移到'body'标记的末尾。 –

您必须将所有jQuery代码放在document.ready事件上。

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".depository").hide(); 
    $("#ImageSelection_0").click(function() { 
     if($(this).is(":checked")) { 
      $(".depository").show(); 
     } else { 
      $(".depository").hide(); 
     } 
    }); 
}); 
</script>

你必须这样做，因为当你尝试将事件处理程序或将其应用jQuery函数的DOM不存在，而在此jsfidle工作，我不知道原因。

来源

2015-10-27 13:04:52 Burimi

或放在页面的末尾。 – hjpotter92

正确和它在jsfiddle中工作的原因，因为你在jsfiddle的JavaScript部分编写的scriptlet将被嵌入在window.load函数中，这意味着DOM和其他资源被加载。 – Akki619

@ Akki619他们可能只在DOM准备就绪时才会评估JavaScript，因此他们可以从Javascript中访问用户输入的Javascript，这很有意义。 – Burimi

问题与jQuery代码显示和隐藏div

回答

相关问题