Question

我试图为每个LOOP添加一个将其发送到另一个HTML文件的按钮，但是我的问题是，一旦我向循环中添加了新内容，它就不再显示任何产品// //“自定义产品“ +是我要添加的代码，但由于某种原因它不起作用

这是我的代码

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Produkte</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/custom.css" rel="stylesheet">
  </head>

  <body>

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">Honig GmbH</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
        </div>
      </div>
    </nav>

    <!-- Page Content -->
    <div class="container">

      <!-- Portfolio Item Heading -->
      <h1 class="my-4">Produkte
        <small>Übersicht</small>
      </h1>


      <a class="btn btn-primary" href="product_create.html">Neues Produkt anlegen</a>
      <br/>
      <!-- Content -->



      <div id="ArtikelContainer" class="row">
        </div>

    <!-- /.container -->

    <br/>
    <!-- Footer -->
    <footer class="py-5 bg-dark">
      <div class="container">
        <p class="m-0 text-center text-white">Copyright &copy; Honig GmbH 2018</p>
      </div>
      <!-- /.container -->
    </footer>

    <!-- Bootstrap core JavaScript -->
    <script src="javascript/jquery/jquery.min.js"></script>
    <script src="css/bootstrap/js/bootstrap.bundle.min.js"></script>

    <script>
    $( document ).ready(function() {});
    console.log("Ready");
    // var currentId = sessionStorage.getItem('customerId');
    $.ajax({
                type: "GET",
                url: "http://localhost:8081/api/artikel/",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(result){
                    console.log("Artikel wurde übertragen"); 
                    console.log(result);



                    $.each(result, function(i, item){
                        console.log(result[i].beschreibung);
                        console.log(result[i].name);
                        $("#ArtikelContainer").append(
                            "<div class='col-lg-3 col-md-4 col-sm-6 portfolio-item'>"+
                                  "<div class='card h-100'>"+
                                    "<a href='#'><img class='card-img-top' src='"+result[i].bildpfad+"' height='200' width='140'></a>"+
                                    "<div class='card-body'>"+
                                     " <h4 class='card-title'>"+
                                        "<a href='#'>"+result[i].name+"</a>"+
                                      "</h4>"+
                                      "<p id=artikel"+ result[i].artikelId + " class='card-text'>Artikelnummer: "+result[i].artikelId+"</p>"+
                                      "<p class='card-text'> Beschreibung: "+result[i].beschreibung+"</p>"+
                                    "</div>"+
                                    // I´m trying to add this part into the loop "<a class="btn btn-primary" href="product_create.html">customize product</a>"+

                                 " </div>"+
                            "</div>"

                        );
                    });
                },complete: function(xhr, statusText){
                    //alert(xhr.status);
                    console.log(xhr.status + ": " + "Home - Completed!"); 
                },error: function(xhr, errMsg) {
                    if(xhr.status==401){
                        alert(xhr.status + ": "  + "Benutzername oder Passwort ist ungültig");

                    }
                }
            });

            function btn_click() {

                artikelId: $('#artikelId').val();
        //      var artikelnummer = sessionStorage.setItem("artikelId");
                document.location = index.html;
                alert(artikelnummer);

            }

            function url(){


            document.location = 'http://somewhere.com/';
            }




    </script>

  </body>

因此，每当我在循环中添加任何内容时，我所有的产品都会消失我很高兴为您提供任何帮助，感谢您的帮助，我已经为此停留了一段时间

Answer 1

如前所述，您只能在引号内使用某些引号。例如，如果定义一个带双引号（"）的字符串，则在内部，必须使用单引号（'），反之亦然。

看看：

$(function() {
  console.log("Ready");
  var result = [{
    beschreibung: "Text 1",
    name: "Name 1",
    bildpfad: "Source 1",
    artikelId: 1
  }, {
    beschreibung: "Text 2",
    name: "Name 2",
    bildpfad: "Source 2",
    artikelId: 2
  }, {
    beschreibung: "Text 3",
    name: "Name 3",
    bildpfad: "Source 3",
    artikelId: 3
  }];

  console.log("Artikel wurde übertragen");
  console.log(result);
  $.each(result, function(i, item) {
    var content = "";
    content += "<div class='col-lg-3 col-md-4 col-sm-6 portfolio-item'>";
    content += "<div class='card h-100'>";
    content += "<a href='#'><img class='card-img-top' src='" + result[i].bildpfad + "' height='200' width='140'></a>";
    content += "<div class='card-body'>";
    content += "<h4 class='card-title'><a href='#'>" + item.name + "</a></h4>";
    content += "<p id='artikel" + item.artikelId + "' class='card-text'>Artikelnummer: " + item.artikelId + "</p>";
    content += "<p class='card-text'> Beschreibung: " + item.beschreibung + "</p></div>";
    content += "<a class='btn btn-primary' href='product_create.html'>customize product</a>";
    content += "</div></div>";
    $("#ArtikelContainer").append(content);
  });
  /*
  var currentId = sessionStorage.getItem('customerId');
  $.ajax({
    type: "GET",
    url: "http://localhost:8081/api/artikel/",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(result) {
      console.log("Artikel wurde übertragen");
      console.log(result);
      $.each(result, function(i, item) {
        console.log(result[i].beschreibung);
        console.log(result[i].name);
        $("#ArtikelContainer").append(
          "<div class='col-lg-3 col-md-4 col-sm-6 portfolio-item'>" +
          "<div class='card h-100'>" +
          "<a href='#'><img class='card-img-top' src='" + result[i].bildpfad + "' height='200' width='140'></a>" +
          "<div class='card-body'>" +
          " <h4 class='card-title'>" +
          "<a href='#'>" + result[i].name + "</a>" +
          "</h4>" +
          "<p id=artikel" + result[i].artikelId + " class='card-text'>Artikelnummer: " + result[i].artikelId + "</p>" +
          "<p class='card-text'> Beschreibung: " + result[i].beschreibung + "</p>" +
          "</div>" +
          // I´m trying to add this part into the loop "<a class="btn btn-primary" href="product_create.html">customize product</a>"+

          " </div>" +
          "</div>"

        );
      });
    },
    complete: function(xhr, statusText) {
      //alert(xhr.status);
      console.log(xhr.status + ": " + "Home - Completed!");
    },
    error: function(xhr, errMsg) {
      if (xhr.status == 401) {
        alert(xhr.status + ": " + "Benutzername oder Passwort ist ungültig");

      }
    }
  });
  */

  function btn_click() {
    artikelId: $('#artikelId').val();
    //      var artikelnummer = sessionStorage.setItem("artikelId");
    document.location = index.html;
    alert(artikelnummer);
  }

  function url() {
    document.location = 'http://somewhere.com/';
  }
});

<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">Honig GmbH</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
    </div>
  </div>
</nav>

<!-- Page Content -->
<div class="container">

  <!-- Portfolio Item Heading -->
  <h1 class="my-4">Produkte
    <small>Übersicht</small>
  </h1>


  <a class="btn btn-primary" href="product_create.html">Neues Produkt anlegen</a>
  <br/>
  <!-- Content -->



  <div id="ArtikelContainer" class="row">
  </div>

  <!-- /.container -->

  <br/>
  <!-- Footer -->
  <footer class="py-5 bg-dark">
    <div class="container">
      <p class="m-0 text-center text-white">Copyright &copy; Honig GmbH 2018</p>
    </div>
    <!-- /.container -->
  </footer>

希望有帮助。

jQuery foreach循环+添加内容

1 个答案: