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