JQuery foreach循环+添加内容

我正试图添加一个按钮，将我发送到每个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>

所以每次我在循环中添加任何东西时，我所有的产品都会消失我很高兴能得到任何帮助，也很感激任何帮助，我已经在这个上呆了一段时间了

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

看看：

$(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>

希望能有所帮助。

相关内容

最新更新

热门标签：