Javascript 函数、Ready、Click、Each、Next、This 和 Toggle

Question

我刚刚开始学习网络开发，有人给了我这段代码供我使用。然而，我想理解它，以便我可以按照我想要的方式改变它。然而，我在完全理解它时遇到了一些困难。我有计算机编程的基础知识。我只是很难理解这里的代码在做什么。我在这里做了一些研究https://api.jquery.com/ 。我理解各个概念，但无法将它们放在一起。到目前为止，这是我的理解:

.ready() :它确保页面已加载并可供使用。我假设除非页面完全加载并准备好进行交互，否则以下代码不会执行。

.click() :基本上响应点击。

.each() :有点像 for 循环。

.next() : 转到下一个元素。

.hide() :隐藏元素(这有点令人困惑，因为它实际上并没有隐藏它，它只是让它跳起来)？

.toggle() :它揭示了一个隐藏的元素？

这是代码:

$(document).ready(function(){
    $('.info').click(function(){
        $('.info').each(function(){
            $(this).next().hide();
        });
        $(this).next().toggle();
    });
});

我想就是这样。但我不确定这一切是如何适应的。有人可以向我解释一下吗？

另外，为什么上面的代码没有这一行就无法工作:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Answer 1

线路

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

从上面的 CDN URL 加载 jQuery 库。该 Javascript 文件包含您正在使用的所有上述函数的定义以及许多其他有用的函数。您可以阅读官方文档了解更多内容。 https://api.jquery.com/

代码说明

$(document).ready(function () {

这会在 document 上注册一个 ready 事件。换句话说，当 DOM 完全加载并准备好进行操作时，就会调用回调匿名函数。

    $('.info').click(function () {

就像 ready 事件处理程序一样，此代码在所有具有 info 类的元素上绑定(bind)一个 click 事件。

        $('.info').each(function () {
            $(this).next().hide();
        });

这部分代码将循环遍历所有具有 info 类的元素，并逐一隐藏每个元素的下一个元素。'

        $(this).next().toggle();

这将切换单击的 $(this) 元素的下一个元素的可见性。并非如此，这显示了上面的 each 循环中的下一个元素，您已经隐藏了 .info 类的所有下一个元素。

    }); // End of click
}); // End of ready

---

您的代码也可以在没有循环的情况下编写为

$(document).ready(function () {
    $('.info').click(function () {

        $('.info').not(this).next().hide();
        // Hide all elements that are nextSibling of the elements having class info other than the clicked one

        $(this).next().show();
        // Show the next element of the clicked element
    });
});