Question

我有一个显示复选框的小脚本，选中后会显示一个选择列表。这在jsfiddle中工作得很好，但是当我在网页上使用时却没有。

网页只包含与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/

任何人都可以看到为什么这不能在我的网页上运行？

非常感谢您的意见。

Answer 1

您必须将所有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上这有用，我不知道原因。

jquery代码显示和隐藏div的问题

1 个答案: