Question

我正在使用德语书（介导的标题）“jQuery练习册”。

在第一个教程中，给定的JS代码是这样的：

$(document).ready(function() 
{
    $("#box p").click
    (
        function()
        {
            $("#box p").removeClass("green");
            $(this)
            .addClass("green")
            .parent()
            .removeClass()
            .addClass("boxColor-" + $("#box p").index(this));
        }
    );
});

CSS就像这样：

<style type ="text/css">
    p {
        cursor:pointer;
    }

    .green{
        color:#009933;
        background-color:#E2FFEC;
        cursor:default;
    }
</style>

，HTML就是这样：

<body>
<div id="box">
    <p>Erster Absatz</p>
    <p>Zweiter Absatz</p>
    <p>Dritter Absatz</p>
</div>
</body>

让我陷入困境的是jQuery脚本的这一行：

.addClass("boxColor-" + $("#box p").index(this));

本书的教程解释了这个原因，例如“我们可以通过哪种方式获得与p box相关的类？”

但我不清楚那条线上发生了什么？

即使我删除了这一行，我看到的结果也是一样的。

那么，这里发生了什么？这有什么必要吗？

Answer 1

该行正在向boxColor-N元素添加#box类，其中N是您刚刚点击的<p>的索引。

由于CSS中没有任何内容可以定位这样的类，也没有适用于它的脚本代码，因此没有可观察到的效果。

Answer 2

此行添加了一个类名。添加的值是字符串boxColor-和相关段落元素的索引的串联。

使用jQuery index() function提取元素的索引。

关于你的问题，如果根本需要它真的取决于该类名称的作用。所有它真正在这里做的是添加一个类名。如果该类名称具有任何其他用途，例如更改CSS属性，则为是，则需要它。在您的示例中，该值没有CSS规则 - 因此没有任何真正的更改或发生。

要看到这个实际的做某事，你可以像这样添加一个CSS规则：

boxColor-0 {
        background:red;
}
boxColor-1 {
        background:green;
}
boxColor-2 {
        background:blue;
}

根据这些规则，当您点击<p>元素时，它的背景颜色会发生变化。

Answer 3

我不知道这是不是一个错误，但正如另一个解释的那样，这将添加类似“boxColor-”+类的索引。

但代码

$("#box p").removeClass("green");
            $(this)
            .addClass("green")
            .parent()
            .removeClass();

在;

上有一个结束.removeClass();

在jQuery中，Chaining用于在所选元素上调用多个函数，但因为您要使用此行结束链接。否则，您将该类添加到<p>标记

的父级

.removeClass();

您没有将addClass应用于任何对象尝试删除;然后使用像

这样的东西

 $("#box p").removeClass("green");
        $(this)
        .addClass("green")
        .parent()
        .removeClass()
        .addClass("boxColor-" + $("#box p").index(this));

这是一个如何工作的例子。

JSFiddle

这个教程的jQuery行是必要的吗？

3 个答案: