Question

基本上，每次有人向购物车中添加商品时，我基本上都在尝试闪烁该元素。

下面是该函数的摘录

 const elements = document.getElementsByClassName('foo-bar')

    for (const element of elements) {
      flashBackground($(element), '#bbbbbb');
    }

所以我抓住dom元素，然后遍历它们并刷新它们的背景，这是可行的，但是我试图将所有旧的JQuery代码重构为ES6

因此，当我使用控制台日志$(element)时，我会得到以下对象

init [a.foo-bar, context: a.foo-bar]

我如何在香草JS中获得等价的$（element）？

Answer 1

只需删除$()，如下所示：

const elements = document.getElementsByClassName('foo-bar');

for (const element of elements) {
  flashBackground(element, '#bbbbbb');
}

检查并运行以下代码段，以获取上述方法的实用示例：

const elements = document.getElementsByClassName('foo-bar');

for (const element of elements) {
  alert(element.innerHTML);
}

<div class="foo-bar">A</div>
<div class="foo-bar">B</div>
<div class="foo-bar">C</div>
<div class="foo-bar">D</div>

或者也可以像这样使用querySelectorAll()方法和forEach()方法：

const elements = document.querySelectorAll('.foo-bar');

elements.forEach(element => flashBackground(element, '#bbbbbb');)

检查并运行以下代码段，以获取上述方法的实用示例：

const elements = document.querySelectorAll('.foo-bar');

elements.forEach(element => alert(element.innerHTML));

<div class="foo-bar">A</div>
<div class="foo-bar">B</div>
<div class="foo-bar">C</div>
<div class="foo-bar">D</div>

Answer 2

已解开谜题。

我在非jquery对象上引用了.css，这破坏了功能 element.css("background");

function flashBackground(element, color) {
...SOME CODE HERE

//needed to be
getComputedStyle(element)["background"]

Answer 3

jQuery的 $（query）选择器实际上是Document.querySelector()的抽象。与jQuery实现一样，querySelector（）可以通过任何标准CSS选择器用于定位节点。

将$（element）转换为原始JS

3 个答案: