理解复杂的切换功能

Understanding complex toggle function

本文关键字：功能 复杂      更新时间：2023-09-26

嘿，伙计们，我是Jquery的新手，基本上我遇到了下面的代码，它基本上是一个手风琴，利用本地存储。

$(function () {
    var initialCollapse = localStorage.collapse;

    if (initialCollapse) initialCollapse = initialCollapse.split(",")
    console.log(initialCollapse);
    $(".collapse-headings>a").click(function () {
        var div = $(this).parent();
        div.toggleClass("close open");

        $(".collapse-content", div).toggle("slow");
        localStorage.collapse = $(".collapse-headings").map(function () {
            return $(this).hasClass("open") ? "open" : "close"
        }).get()
        console.log(localStorage.collapse)
        return false;
    })
    if (initialCollapse) {
        $(".collapse-headings>a").each(function (i) {
            var div = $(this).parent();
            div.removeClass("close open").addClass(initialCollapse[i])
            $(".collapse-content", div).toggle(initialCollapse[i] !== "close");
        })
    }
});
这里的

小提琴。

现在我看了JQuery文档，它很有帮助，基本上我能够理解大部分代码，除了一行代码，即

$(".collapse-content", div).toggle(initialCollapse[i] !== "close");

如果上面那行代码做了什么??我知道它在使用不等于运算符，但它到底是如何工作的呢?有人能解释一下吗?请打破它为我，因为我是一个JS新手。

谢谢。

gautam。

暂时忘记布尔检查的复杂性，如果它是

会更有意义吗?
$(".collapse-content", div).toggle(true);

或

$(".collapse-content", div).toggle(false);

医生说

使用true显示该元素，或使用false隐藏该元素。

因此，如果手风琴的特定元素未设置为"close"，则布尔检查initialCollapse[i] !== "close"将为true。

进一步细分:

$(".collapse-content", div).toggle(initialCollapse[i] !== "close");

.collapse-content是类选择器，我相信你知道。第二个参数div是选择器的范围/上下文(选择器将仅在此范围内搜索)。在这种情况下，div只是设置为$(this).parent();的变量(在每个循环中引用)。所以这个是循环中的当前元素)

语句initialCollapse[i] !== "close"将返回true或false，取决于当前数组位置的值是否等于'close'(在这种情况下，如果数组的值不是 'close'，则返回true)。

对于数组initialCollapse，它设置在顶部:

var initialCollapse = localStorage.collapse;
if (initialCollapse) initialCollapse = initialCollapse.split(",")

设置为localStorage.collapse，然后，如果它有任何数据，用逗号分割成一个数组。

因此，简化它将被解释为:

//I'm typing out the scope/context explicitly for illustration
$(".collapse-content", ".collapse-headings>a").toggle(true); //or false

True会将元素切换为show，而false会将元素切换为hide。

基本上，它是设置所有初始值的地方，本地存储。

它将循环所有元素$(".collapse-headings>a").each(...，并根据localStorage的值"open"或"close"显示或隐藏元素。

toggle接受一个布尔值，true显示，false隐藏元素(Documentation)

如果存储值是"close"，它应该将false传递给工具函数，因此initialCollapse[i] !== "close"返回false。

例如:initialCollapse[i] === "open"也可以。

注意:简化代码的一个好方法是修改这两行:

return $(this).hasClass("open") ? "open" : "close"
...
$(".collapse-content", div).toggle(initialCollapse[i] !== "close");

: 

return $(this).hasClass("open")
...
$(".collapse-content", div).toggle(initialCollapse[i]);

您将存储布尔值而不是字符串，这将更轻，它将简化比较。

相关文章：