Я работаю над одностраничным приложением в jQuery, где будут отображаться разные кнопки и опции в зависимости от того, какие кнопки нажаты.

Я не могу понять, почему мои функции hide () не работают. Я завернул это в $ (document).готовая функция, но я чувствую, что либо я чего-то не включаю, либо что-то еще мешает.

Также да, я проверил и увидел, что библиотека 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>  

Кто-нибудь может дать какие-либо указания или предложения?

 $(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();
});