javascript - jQuery:隐藏功能无法正常工作？

Question

我正在 jQuery 中开发一个单页应用程序，其中将根据单击的按钮显示不同的按钮和选项。

我不明白为什么我的 hide() 函数不起作用。我将它包装在 $(document).ready 函数中，但我觉得要么是我没有包含的东西，要么是其他东西在干扰。

也是的，我确实检查过，发现 jQuery 库是在我的 JS 文件之前加载的。

$(document).ready(function() {
    showCategories() {
      ("#dog").hide();
      ("#cat").hide();
      ("#eagle").hide():
      ("#sparrow").hide();
    }
      
    showCategories();
});

    #purple {
      color: purple;
    }
    
    #pink {
      color: pink;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <button id="purple">Mammals </button>
    <button id="pink">Birds</button>
    
    <div class="mammalButtons"> 
      <button id="dog">Dog</button>
      <button id="cat">Cat</button>
    </div>
    
    <div class="birdButtons">
      <button id="eagle">Eagle</button>
      <button id="sparrow">Sparrow</button>
    </div>

谁能给点意见或建议吗？

Answer 1

$(document).ready(function() {
    showCategories() {
        ("#dog").hide();
        ("#cat").hide();
        ("#eagle").hide():
        ("#sparrow").hide();
    }
});

1) 格式错误的函数定义

showCategories(){} 格式不正确。函数定义需要以 function 开头。因此，要纠正这个问题，它需要看起来像

$(document).ready(function() {
    function showCategories() {
        ("#dog").hide();
        ("#cat").hide();
        ("#eagle").hide():
        ("#sparrow").hide();
    }
});

但是，这会导致另一个问题。这只是声明了一个函数。它没有执行它。所以你必须将其更改为...

$(document).ready(function() {
    function showCategories() {
        ("#dog").hide();
        ("#cat").hide();
        ("#eagle").hide():
        ("#sparrow").hide();
    }

    showCategories();
});

要执行该函数，但实际上此时您应该将其删除。

$(document).ready(function() {
    ("#dog").hide();
    ("#cat").hide();
    ("#eagle").hide():
    ("#sparrow").hide();
});

2) 调用 jQuery 时出现拼写错误

("#dog").hide(); 和其他调用只是尝试在字符串上调用 hide() ，因为您错过了$ 用于查找。所有这些都应该纠正。

$(document).ready(function() {
    $("#dog").hide();
    $("#cat").hide();
    $("#eagle").hide():
    $("#sparrow").hide();
});

此时，它应该可以工作，但是，您可以减少它，因为您正在对多个事物执行相同的操作。

$(document).ready(function() {
    $("#dog, #cat, #eagle, #sparrow").hide();
});