Question

我遇到了错误：

Uncaught TypeError: e.nextElementSibling.fadeToggle is not a function
at HTMLSpanElement.e.addEventListener

奇怪的是，当我将el.nextElementSibling.fadeToggle()更改为：el.nextElementSibling.remove()时-一切正常。有什么想法吗？

$(function () {

    const spans = $('span');
    const lists = $('ul')
    const newArr = [];

    for (x of spans) {
        newArr.push(x);
    }

    newArr.forEach(fn)

    function fn(el) {
        el.addEventListener('click', () => el.nextElementSibling.fadeToggle();
        )
    }

})

Answer 1

fadeToogle可能是jQuery方法，而nextElementSibling是常规DOM元素。

您必须将其包装在jQuery中才能使用jQuery方法，如

$(el.nextElementSibling).fadeToggle()

真正的问题是，为什么您会尽可能做到这一点

$(function() {
    $('span').on('click', function() {
        $(this).next().fadeToggle();
    });
});

remove()起作用的原因是因为同时存在一个jQuery版本和一个本机版本，它们的工作方式相同，因此使用常规DOM元素，您将调用本机remove()，而不是jQuery的版本

Answer 2

.remove起作用的原因是因为它内置在ChildNode API中。但是，fadeToggle()仅适用于jQuery。您必须“ jquerize”您的元素以使代码正常工作（将其包括在$(...)中）。像这样：

// toggle the next sibling every 2s
setInterval(() => {
  $('ul').each(function() {
    $(this.nextElementSibling).fadeToggle();
  });
}, 2000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li>some</li>
  <li>list</li>
</ul>
<div>
  the <code>nextElementSibling</code> of the list
</div>

Answer 3

您为什么要这样做？ jQuery专为以简洁明了的方式处理事情而无需拆包/重新包装：

$(() => {
  const fade = function() {
    let el = this.nextSibling;
    if (el) $(el).toggleFade();
  };

  $('span').click(fade);
});

我们完成了。

您几乎可以对jQuery选择的结果使用任何jQuery函数。只需确保您使用箭头函数 绝对不是 ，因为箭头函数明确地旨在根据声明的范围保留this的含义，这与使用jQuery时发生的情况相反。

未捕获的TypeError：e.nextElementSibling.fadeToggle不是函数

3 个答案: