将div容器克隆n次并在其中插入不同的数据

Question

很抱歉这个愚蠢的问题。我有一个div容器“ product-card”，我想循环我已部署的智能合约的时间。每次循环时，我都想克隆此div容器并插入合同明细（每次基于合同明细都使用不同的数据）。

如何实现？，我尝试了clone（）。但它会继续将相同的数据克隆到所有克隆的div

<div class="product-card" id="copy">
    <div class="badge">Hot</div>
    <div class="product-tumb" id="coverImage"></div>
    <div class="product-details" id="bookId">
        <span  id="table" class="product-category"></span>
        <h4><a href="" id="bookName"></a></h4>
        <p id="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, possimus nostrum!</p>
        <div class="product-bottom-details">
            <div class="product-price" id="price"><small id="price"></small>$230.99</div>
            <div class="product-links">
                <a href=""><i class="fa fa-heart"></i></a>
                <a href=""><i class="fa fa-shopping-cart"></i></a>
            </div>
        </div>
    </div>
</div>

这是我的js。我正在与智能合约进行交互以获取数据

StartTrade.getContractcount(function (error, result) {
    if (!error) {
        console.log(result);
        console.log(JSON.stringify(result));
        var contractCount = Number(result);
        var t = $("#contractTable").val();
        for (var i = 0; i < contractCount; i++) {
            StartTrade.contracts(i, function (error, result) {
                if (!error) {
                    //  console.log("cont addr ["+[result]+"]");
                    console.log(result);
                    document.getElementById("table").innerHTML = result;
                    var Purchase = PurchaseContract.at(result);
                    Purchase.price(function (error, result) {
                        if (!error) {
                            console.log(JSON.stringify(result));
                            $('#price').html("price eth: " + result / 1000000000000000000);
                        } else {
                            console.log(error);
                        }
                    });
                    Purchase.name(function (error, result) {
                        if (!error) {
                            console.log(JSON.stringify(result));
                            $('#bookName').html(result);
                        } else {
                            console.log(error);
                        }
                    });
                    Purchase.text(function (error, result) {
                        if (!error) {
                            console.log(JSON.stringify(result));
                            $('#description').html(result)
                        } else {
                            console.log(error);
                        }
                    });
                    Purchase.cover(function (error, result) {
                        if (!error) {
                            console.log(JSON.stringify(result));
                            $("#coverImage").html("<img src=http://localhost:8080/ipfs/" + result + ">");
                        }
                    });
                } else {
                    console.error(error);
                }
            });
        }
    } else {
        console.error(error);
    }
});

Answer 1

代码中的问题是您正在使用id来定位元素。

像这样更改您的HTML

<div class="product-card">
    <div class="badge">Hot</div>
    <div class="product-tumb coverImage">
    </div>
    <div class="product-details bookId" >
      <span class="table product-category"></span>
      <h4><a href="" class="bookName"></a></h4>
      <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, possimus nostrum!</p>
      <div class="product-bottom-details">
        <div class="product-price price">$230.99</div>
        <div class="product-links">
          <a href=""><i class="fa fa-heart"></i></a>
          <a href=""><i class="fa fa-shopping-cart"></i></a>
        </div>
      </div>
    </div>
  </div>

还有像这样的Js

StartTrade.getContractcount(function (error, result) {
  if (!error) {
    console.log(result)
    console.log(JSON.stringify(result))
    var contractCount = Number(result)
    var t = $('#contractTable').val()

    var $referenceElement = $('.product-card:first')
    var $cloneElement = $referenceElement.clone()

    $('body').append($cloneElement)

    for (var i = 0; i < contractCount; i++) {
      StartTrade.contracts(i, function (error, result) {
        if (!error) {
          //  console.log("cont addr ["+[result]+"]");
          console.log(result)
          $cloneElement.find('.table').innerHTML = result
          var Purchase = PurchaseContract.at(result)
          Purchase.price(function (error, result) {
            if (!error) {
              console.log(JSON.stringify(result))
              $cloneElement.find('.price').html('price eth: ' + result / 1000000000000000000)
            } else {
              console.log(error)
              $cloneElement.remove()
            }
          })
          Purchase.name(function (error, result) {
            if (!error) {
              console.log(JSON.stringify(result))
              $cloneElement.find('.bookName').html(result)
            } else {
              console.log(error)
              $cloneElement.remove()
            }
          })
          Purchase.text(function (error, result) {
            if (!error) {
              console.log(JSON.stringify(result))
              $cloneElement.find('.description').html(result)
            } else {
              console.log(error)
              $cloneElement.remove()
            }
          })
          Purchase.cover(function (error, result) {
            if (!error) {
              console.log(JSON.stringify(result))
              $cloneElement.find('.coverImage').html('<img src=http://localhost:8080/ipfs/' + result + '>')
            } else {
              console.error(error)
              $cloneElement.remove()
            }
          })
        } else {
          console.error(error)
          $cloneElement.remove()
        }
      })
    }
  } else {
    console.error(error)
  }
})