Question

我出于设计目的创建了此卡，但我想使用JavaScript或jQuery动态创建html卡，这意味着如果我在循环中传递5个值，则将以相同的设计创建5张卡。我怎样才能做到这一点？

<div class="scrolling-wrapper">
  <div class="card">
    <img id="card-shopping-cart-icon" src="images/cart.png" alt="">
    <img id="card-wishlist-icon" src="images/heart.png" alt="">
    <img id="card-image" src="images/motorola_one.jpg" alt="Motorola" class="contain">

    <div class="card-text-body">
      <p class="card-clock-deals-title">Motorola One Power</p>
      <p class="card-clock-deals-detail">RAM 4/6GB ROM 64GB</p>
      <p class="card-clock-deals-discounted-price">2000</p>
      <p>
        <table class="card-clock-deals-timer">
          <tr>
            <td id="hours">12</td>
            <td>:</td>
            <td id="minutes">00</td>
          </tr>

        </table>
      </p>
      <p class="card-clock-deals-original-price">3000</p>
      <p class="card-clock-deals-timer-text">Hrs Left</p>
      <p class="card-clock-deals-like-image"><img src="images/heart.png" alt="">(381)</p>
    </div </div>

我出于设计目的创建了此卡，但我想使用JavaScript或jQuery动态创建html卡，这意味着如果我在循环中传递5个值，则将以相同的设计创建5张卡。我怎样才能做到这一点？

Answer 1

因此，正如我所问的那样，您正在使用数据库来存储卡中的数据，对吗？因此，您所需要做的就是创建与数据库的连接，然后通过循环获取结果以一张一张显示卡片。

        // Here you need to create your connection to the database with your values
        <?php
            include 'connection.php';
        //Here write your SQL query to get the data from your cards database
            $sql = "SELECT * FROM cards";
            $result = $conn->query($sql);
        ?>

        // Then we start with the html code to get the data and show the cards
        <!doctype html>
        <html>
          <body>
           <h1 align="center">CARDS</h1>
        <?php
        //Fetch Data form database
        if($result->num_rows > 0){
         while($row = $result->fetch_assoc()){
         ?>
            <div class="scrolling-wrapper">
            <div class="card">

            <img id="card-shopping-cart-icon" src="images/cart.png" alt="">
            <img id="card-wishlist-icon" src="images/heart.png" alt="">
            <img id="card-image" src="images/<?php echo $row['RowNameYouWannaGet']; ?>" alt="Motorola" class="contain">

        <div class="card-text-body">
              <p class="card-clock-deals-title"><?php echo $row['RowNameYouWannaGet']; ?></p>
              <p class="card-clock-deals-detail"><?php echo $row['RowNameYouWannaGet']; ?></p>
              <p class="card-clock-deals-discounted-price"><?php echo $row['RowNameYouWannaGet']; ?></p>
              <p>
                <table class="card-clock-deals-timer">
                  <tr>
                    <td id="hours"><?php echo $row['RowNameYouWannaGet']; ?></td>
                    <td>:</td>
                    <td id="minutes"><?php echo $row['RowNameYouWannaGet']; ?></td>
                  </tr>

                </table>
              </p>
              <p class="card-clock-deals-original-price"><?php echo $row['RowNameYouWannaGet']; ?></p>
              <p class="card-clock-deals-timer-text"><?php echo $row['RowNameYouWannaGet']; ?></p>
              <p class="card-clock-deals-like-image"><img src="images/heart.png" alt=""><?php echo $row['RowNameYouWannaGet']; ?></p>
          </div>
       </div>
         <?php
           }
           }
           else
            { echo "No data found" } ?>
          </body>
        </html>

希望有帮助，您也可以在Google搜索中找到信息->动态表PHP，MySQL

Answer 2

*仅适用于 BOOTSTRAP 4 及以上的 HTML 代码，并在下面找到“JAVASCRIPT FOR CARDS”

    <div class="container row col-12 col-sm-12 justify-content-center" id="parsi">
    <div class="card" style="width:18 rem;">
        <img  class="card-img-top"src="#" alt="">
        <div class="card-body">
            <h1>This is an card</h1>
            <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing 
            elit. Tempore, repudiandae neque? Placeat harum veniam omnis dolorum 
            necessitatibus vitae, nisi ducimus illum.</p>
            <button type="button" class="btn btn-primary" 
             onclick="myclick()">Submit</button>
        </div>
    </div>
</div>

“卡片的JAVASCRIPT”==>

function myclick(){
    var x= prompt("Enter number of cards u want to make","6");
    if (x!=null){
        var main=document.getElementById("parsi");
        let num=parseInt(x);
        var i;
        const red="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore, 
        repudiandae neque? Placeat harum veniam omnis dolorum necessitatibus vitae, 
        nisi ducimus illum.";
        var div=[];
        for (i=0;i<num;i++){
            div.push(document.createElement("div"));
            div[i].setAttribute("class","card col-12 col-sm-3 ml-2 mt-3");
            div[i].setAttribute("style","width:18 rem;");
            const image=document.createElement("img");
            image.setAttribute("class","card-img-top");
            image.src="#";
            div[i].appendChild(image);
            var innerDiv=document.createElement("div");
            innerDiv.setAttribute("class","card-body");
            var h1=document.createElement("h1");
            h1.textContent="This is the heading";
            var p1=document.createElement("p1");
            p1.setAttribute("class","card-text");
            p1.textContent=red;
            innerDiv.appendChild(h1);
            innerDiv.appendChild(p1);
            div[i].appendChild(innerDiv);
            main.appendChild(div[i]);

        }
        


    }
}

Answer 3

我为此创建了jsFiddle演示。

https://jsfiddle.net/wer4px80/2/

html：

<div id="scrolling-wrapper"></div>

javascript：

 $(document).ready(function(){

  var count = 5;

  var html = "";
  for(i=1;i<=count;i++)
  {
    html += "<div class='card'>card " + i +"</div>";
    html += "<br>";
  }
  $("#scrolling-wrapper").html(html);

});

请检查是否需要生成更多卡，可以根据需要更改变量值和html内容。

您应该从端点使用ajax获取动态数据，这将为您提供存储在数据库中需要呈现在页面上的数据。

您还可以研究车把或小胡子模板工具，以更好地处理动态内容。

链接如下：

https://mustache.github.io/

https://handlebarsjs.com/

如何使用javascript和jquery在html中动态创建div卡？

3 个答案: