Question

我似乎不断从产品数组附带的 find（）方法返回未定义。我不知道为什么。我的回调函数中的条件应为true。谁能告诉我原因是什么？

如果需要添加更多信息，请告诉我。谢谢

    ``` html
    <img class = "image" id = "image" src = " " alt = "activeimage">
    <div class = "button" id = "btn1"></div>
    <span id = "colorlabel"> </span>
    
    <button id = "addtocartBtn" type = "button">Add To Cart</button>
    ```
    
    ``` js
    $("#btn1").on("click", function(){
    $('#image').attr("src", "assets/chad.jpg");
    $('#colorlabel').text("Black/Black/Black");
    ```
    ``` js
    let addToCart = document.querySelector('button#addtocartBtn');
    let products = [
      {
        name: "Black/Black/Black",
        tag: 'black/black/black',
        price: 21.99,
        inCart: 0
        },
      {
        name: "Navy/Navy/Navy",
        tag: 'navy/navy/navy',
        price: 21.99,
        inCart: 0
        },
      {
        name: "Off-White/Off-White/Off-White",
        tag: 'off-white/off-white/off-white',
        price: 21.99,
        inCart: 0
          }
         ];
    let myProduct = products.find(element => {
      let spancolorLabel = document.querySelector('span#colorlabel');
      let spanTextContent = spancolorLabel.textContent;
      let stringify = JSON.stringify(element.name);
      return (stringify == spanTextContent);
    })
    addToCart.addEventListener("click", () => {
      console.log(myProduct);
    })
    ```

Answer 1

使用“ #addtocartBtn”代替“＃btn1”来选择正确的按钮。

此外，您不必使用JSON.stringify，只需使用element.name将字符串与字符串进行比较，该函数将返回element.name，例如““” Black / Black / Black“”

Answer 2

最好尝试以下代码，

let myProduct = products.find(element => {   
  let colorLabel = document.querySelector('span#colorlabel');   
  let spanTextContent = spancolorLabel.textContent;   
  let stringify = element.name;  // Here is the change   
  return (stringify == spanTextContent); 
});

您正在尝试对字符串值进行字符串化，因此它可能是在比较““ value”“而不是” value“。

为什么仍然从array.find（）方法返回不确定的信息？

2 个答案: