Question

我想知道javascript中的classname与jQuery中的addClass是否相同。我想将以下函数更改为jQuery：

function slidePageFrom(page, from) {
        // Position the page at the starting position of the animation
        page.className = "page " + from;
        // Position the new page and the current page at the ending position of their animation with a transition class indicating the duration of the animation
        page.className ="page transition center";
        currentPage.className = "page transition " + (from === "left" ? "right" : "left");
        currentPage = page;
    }

HTML：

  <section id="homePage" class="page center" style="background-color: #add55a">
        <h1>Home Page</h1>
        <a href="javascript:slidePageFrom(page1, 'right');">Page 1</a>
    </section>

    <section id="p1" class="page right" style="background-color: #8ca83d">
        <h1>Page 1</h1>
        <a href="javascript:slidePageFrom(page2, 'right');">Back</a>
    </section>
    <section id="p2" class="page right" style="background-color: #8ca83d">
        <h1>Page 2</h1>
        <a href="javascript:slidePageFrom(homePage, 'left');">Back</a>
    </section>

Answer 1

DOM元素节点的className属性是该节点上的所有类的空格分隔列表。如果一个元素有“a”，“b”和“c”类，那么.className将是"a b c"（可能是另一个顺序，顺序无关紧要）。

相比之下，jQuery .addClass()和.removeClass()函数执行他们所说的：添加一个类（如果它还没有）或删除一个类（如果是）。这些操作只会影响所涉及的课程;其他人留在原地。

所以答案是jQuery方法为你提供了一个操纵.className属性的抽象，但说它们是“相同的”是不正确的。

请注意，在您的函数中，使用前两个语句：

    page.className = "page " + from;
    // Position the new page and the current page at the ending position of their animation with a transition class indicating the duration of the animation
    page.className ="page transition center";

.className属性的第二个赋值完全覆盖第一个语句放置的值。换句话说，无论from的值如何，第二个语句后page.className的值始终为"page transition center"。另一方面，如果第二个语句使用了jQuery .addClass()：

    $(page).addClass("page transition center");

之后，from中的任何类名仍然存在。

classname javascript与addClass jQuery相同？

1 个答案: