Question

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

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

        })
    }

});

Fiddle HERE 即可。

现在我浏览了JQuery文档，它非常有用，基本上我能够理解大部分代码，除了一行代码，I.E。

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

如果上面的代码行怎么办？我知道它使用的是不等于运算符，但它究竟是如何运作的？有人可以解释一下吗？请为我分解，因为我是一名JS新手。

谢谢。

高塔姆。

Answer 1

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

会更有意义吗

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

或

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

docs说

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

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

Answer 2

要打破它（甚至更多）：

$(".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 会隐藏。

Answer 3

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

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

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

如果存储的值为"close"，则应将false传递给 toogle 函数，因此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]);

您将存储一个布尔值而不是一个字符串，它会更轻，并且可以简化比较。

了解复杂的切换功能

3 个答案: