0

我想我会在 jQuery 事件期间花哨并使用 vanilla JavaScript。这个想法是，在点击一个标题时，我想向上滑动一个 div（它可以工作）并将点击的标签替换为一个更大的标题。

从我读过的内容来看，这可能是由于parentNode引用了一个不是实际父元素的元素，但在检查后似乎选择了它正上方的元素。

所以......这是代码！

HTML（在 Jade 中）

.policy-container
  h6.policy-heading Policies
  .policy-list
    .content-we-are-hiding
    .not-actually-important

jQuery

$('.policy-heading').click(function() {
    var self = this;

    if (this.classList.contains('closed')) {
        $(this).next().slideDown(300);

        this.parentNode.replaceChild(self, '<h6 class="policy-heading">Policies</h6>');

    } else {
        $(this).next().slideUp(300);

        this.parentNode.replaceChild(self, '<h2 class="policy-heading closed">Policies</h2>');
    }
});

一切看起来都很标准。幸运的是，我可以使用 jQuery 来解决这个问题，但是我宁愿在这里使用 vanilla JS。任何想法为什么这不起作用？

4

4 回答 4

2

正如已经指出的那样，replaceChild需要两个节点。

正如您所指定的，以下内容适用于包装在 jQuery 中的本机 JS：

$('.policy-heading').click(function () {
    var self = this,
        h2 = document.createElement('h2'),
        h6 = document.createElement('h6');

    h2.class = "policy-heading closed";
    h2.innerHTML = "Policies";

    h6.class = "policy-heading";
    h6.innerHTML = "Policies";

    if (this.classList.contains('closed')) {
        $(this).next().slideDown(300);
        this.parentNode.replaceChild(h6, self);
    } else {
        $(this).next().slideUp(300);
        this.parentNode.replaceChild(h2, self);
    }
});
于 2013-05-15T16:51:24.640 回答
1

replaceChild需要两个节点，你给它一个节点和一个字符串。

看起来你最好还是坚持使用 jQuery 并使用切换功能来进行滑动和类更改。

于 2013-05-15T16:34:33.777 回答
1

试试这个 ：

.click(function(this)

你还需要一些调试来了解发生了什么我建议你使用：

console.log(this)

用这个 ：

el = document.createElement('h6');
el.class = "policy-heading";
el.innerHTML = "Policies";

this.parentNode.replaceChild(self, el);
于 2013-05-15T16:37:38.677 回答
1

正如大家所指出的，.replaceChild接受两个 DOM 元素，而不是像我使用的字符串。我也有它的论据，第一个是新元素，第二个是替换元素。

有效的示例代码

$('.policy-container').on('click', '.policy-heading', function() {

    var self = this,
            newElement;

    if (this.classList.contains('closed')) {

        newElement = document.createElement( 'h6' );
        newElement.classList.add('policy-heading');
        newElement.innerHTML = 'Policies';

    } else {

        newElement = document.createElement( 'h2' );
        newElement.classList.add('policy-heading');
        newElement.classList.add('closed');
        newElement.innerHTML = 'Policies';

    }

    $(this).next().slideDown(300, function() {
        self.parentNode.replaceChild( newElement, self );
    });

});
于 2013-05-15T17:08:41.297 回答