Question

我正在使用class（.add-to-cart）遍历HTML中的所有锚标记，以使用map（）将文本内容更改为立即购物，但是我收到一个错误消息，指出.map不是功能。

<!--HTML CODE -->
 <div class="four columns">
        <div class="card">
                <a href="#" class="u-full-width button-primary button input add-to-cart" data-id="5">Add to Cart</a>
        </div>
</div> <!--.card-->
<div class="four columns">
        <div class="card">
                <a href="#" class="u-full-width button-primary button input add-to-cart" data-id="5">Add to Cart</a>
        </div>
</div> <!--.card-->
<div class="four columns">
        <div class="card">
                <a href="#" class="u-full-width button-primary button input add-to-cart" data-id="5">Add to Cart</a>
        </div>
</div> <!--.card-->


//JAVASCRIPT CODE
const addCartBtns = document.querySelectorAll('.add-to-cart');


addCartBtns.map(function(cartBtn){
  console.log(cartBtn.textContent="shop now");
});

我希望输出将锚标记的文本内容更改为“立即购买”。

Answer 1

document.querySelectorAll返回一个NodeList，在使用Array之前应将其转换为实数map()

Document方法querySelectorAll()返回一个静态（非实时）NodeList，它表示与指定选择器组匹配的文档元素列表

您可以使用Spread运算符

const addCartBtns = [...document.querySelectorAll('.add-to-cart')]

或者您可以使用Array.from

const addCartBtns = Array.from(document.querySelectorAll('.add-to-cart'))

请注意，您正在使用map()。当您要基于相同长度的现有数组的值创建新数组时，使用map()。在这里，您正在修改数组。因此，您可以使用forEach

addCartBtns.forEach(function(cartBtn){
  console.log(cartBtn.textContent="shop now");
});

注意：如果forEach未转换为数组，则NodeList可以正常工作。

Answer 2

在这里，您实际上不需要map，forEach会需要，而NodeList有一个forEach。因此：

addCartBtns.forEach(function(cartBtn) {
  console.log(cartBtn.textContent="shop now");
});

Answer 3

您不能仅仅因为map的输出是NodeList对象，而不是Array对象，所以不能使用map。如果要循环遍历NodeList中的每个项目，则应改用forEach。

看看NodeList API文档：
https://developer.mozilla.org/en-US/docs/Web/API/NodeList

但是，您可以快速将NodeList对象转换为Array
Fastest way to convert JavaScript NodeList to Array?

[...addCartBtns]

Array.prototype.slice.call(addCartBtns);

Array.from(addCartBtns)

如何修复Javascript中的“地图不是函数”错误

3 个答案: