javascript - 两个 jQuery 函数无法在单个 <script> 标签中工作

Question

我有一个要求，

1. 在选择特定选项列表项时，我需要使用 checkbox 显示/隐藏一个部分
2. 在第 1 步中选择复选框后，我还需要显示/隐藏另一个部分。

This is what I tried

<script>
j$('#type').on('change', function()
{

    if(this.value == 'Technical Issue'){ 
        j$('#techtroubleshootoption').show();
         j$('#forceemailcase').show();
        j$('#main').hide();
    } 
    else{
        j$('#techtroubleshootoption').hide();
        j$('#forceemailcase').hide();
        j$('#main').show();
    } 
});
j$('#chkforcemailcase').click( function()
{
  if(this.checked){ 
        j$('#techtroubleshootoption').hide();
         j$('#forceemailcase').show();
        j$('#main').show();
    } 
    else{
        j$('#techtroubleshootoption').show();
        j$('#forceemailcase').show();
        j$('#main').hide();
    }   
});
</script>

第一个功能正在工作，在选择所需值后，它会显示/隐藏下面的部分，但在选择复选框时，它不会执行任何操作。

Workaround

如果将第二个函数放在另一个函数中<script>标记它工作很好。现在，我的问题是为什么它不能在同一个 <script> 中工作标记，声明多个 <script> 是正确的方法吗？每个功能的标签(这对我来说听起来不太合适)。

Answer 1

您需要用 $(document).ready() 包装所有的 javascript

$(document).ready(function() {

    j$('#type').on('change', function() {
        if(this.value == 'Technical Issue'){ 
            j$('#techtroubleshootoption').show();
                j$('#forceemailcase').show();
            j$('#main').hide();
        } 
        else{
            j$('#techtroubleshootoption').hide();
            j$('#forceemailcase').hide();
            j$('#main').show();
        } 
        });
        j$('#chkforcemailcase').click( function()
        {
        if(this.checked){ 
            j$('#techtroubleshootoption').hide();
                j$('#forceemailcase').show();
            j$('#main').show();
        } 
        else{
            j$('#techtroubleshootoption').show();
            j$('#forceemailcase').show();
            j$('#main').hide();
        }   
    });
});