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