клонировать контейнер Div n раз и вставить разные данные внутри - PullRequest
Новая
       49

клонировать контейнер Div n раз и вставить разные данные внутри

0 голосов
/ 14 октября 2019

Извините за глупый вопрос. У меня есть контейнер 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-catagory"></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);
    }
});

1 Ответ

0 голосов
/ 15 октября 2019

Проблема в вашем коде в том, что вы используете 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-catagory"></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)
  }
})
...