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

Question

我正在使用类 (.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返回 a在使用前NodeList应转换为实数Arraymap()

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

您可以使用扩展运算符

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不转换为数组会正常工作。