Fatal编程技术网
  • javascript/
  • Javascript jqueryforeach循环+；添加内容

Javascript jqueryforeach循环+；添加内容

javascript jquery html

Javascript jqueryforeach循环+；添加内容,javascript,jquery,html,Javascript,Jquery,Html,我试图添加一个按钮，将我发送到for each循环中的另一个HTML文件，但我的问题是，一旦我在循环中添加新的内容，它就不再显示任何产品了//“customize product”+是我试图添加的代码，但不知怎的，它不起作用 这是我的密码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width

我试图添加一个按钮，将我发送到for each循环中的另一个HTML文件，但我的问题是，一旦我在循环中添加新的内容，它就不再显示任何产品了//“customize product”+是我试图添加的代码，但不知怎的，它不起作用

这是我的密码

    <!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>


普罗杜克特
普罗杜克特
Übersicht





版权和副本；霍宁股份有限公司2018

$（文档）.ready（函数（）{}）；
控制台日志（“就绪”）；
//var currentId=sessionStorage.getItem（'customerId'）；
$.ajax({
键入：“获取”，
url:“http://localhost:8081/api/artikel/",
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（结果）{
console.log（“Artikel wurdeübertragen”）；
控制台日志（结果）；
$。每个（结果、功能（i、项目）{
console.log（结果[i].beschreibung）；
console.log（结果[i].name）；
$（“#ArtikelContainer”）。追加(
""+
""+
""+
""+
" "+
""+
""+
“
Artikelnummer:“+result[i]。artikelId+”
”+
“
Beschreibung:+结果[i].Beschreibung+”
”+
""+
//我正在尝试将此部分添加到循环中“”+
" "+
""
);
});
}，完成：函数（xhr，状态文本）{
//警报（xhr.状态）；
log（xhr.status+“：+“Home-Completed！”）；
}，错误：函数（xhr，errMsg）{
如果（xhr.status==401）{
警报（xhr.status+“：”+“Benutzername order Passwort ist ungültig”）；
}
}
});
函数btn_click（）{
artikelId:$（'#artikelId'）.val（）；
//var artikelnummer=sessionStorage.setItem（“artikelId”）；
document.location=index.html；
警报（ArtikerNummer）；
}
函数url（）{
document.location=http://somewhere.com/';
}
所以每次我在循环中添加任何东西，我的所有产品都会消失
我很高兴能得到任何帮助，也非常感谢您的帮助，我在这个问题上被困了一段时间

正如前面提到的，您只能在引号中使用某些引号。例如，如果使用双引号（
“
）定义字符串，则在内部必须使用单引号（
”
），反之亦然

看一看:

$（函数（）{
控制台日志（“就绪”）；
var结果=[{
beschreibung：“文本1”，
名称：“名称1”，
bildpfad：“来源1”，
artikelId:1
}, {
beschreibung：“文本2”，
姓名：“姓名2”，
bildpfad：“来源2”，
artikelId:2
}, {
beschreibung：“文本3”，
姓名：“姓名3”，
bildpfad：“来源3”，
artikelId:3
}];
console.log（“Artikel wurdeübertragen”）；
控制台日志（结果）；
$。每个（结果、功能（i、项目）{
var-content=“”；
内容+=”；
内容+=”；
内容+=”；
内容+=”；
内容+=”；
content+=“
artikelnumer:“+item.artikelId+”
”；
content+=“
Beschreibung:“+item.Beschreibung+”
”；
内容+=”；
内容+=”；
$（“#ArtikelContainer”）。追加（内容）；
});
/*
var currentId=sessionStorage.getItem（'customerId'）；
$.ajax({
键入：“获取”，
url:“http://localhost:8081/api/artikel/",
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（结果）{
console.log（“Artikel wurdeübertragen”）；
控制台日志（结果）；
$。每个（结果、功能（i、项目）{
console.log（结果[i].beschreibung）；
console.log（结果[i].name）；
$（“#ArtikelContainer”）。追加(
"" +
"" +
"" +
"" +
" " +
"" +
"" +
“
Artikelnummer:“+result[i]。artikelId+”
”+
“
Beschreibung:+结果[i].Beschreibung+”
”+
"" +
//我正在尝试将此部分添加到循环中“”+
" " +
""
);
});
},
完成：功能（xhr、状态文本）{
//警报（xhr.状态）；
log（xhr.status+“：+“Home-Completed！”）；
},
错误：函数（xhr、errMsg）{
如果（xhr.status==401）{
警报（xhr.status+“：”+“Benutzername order Passwort ist ungültig”）；
}
}
});
*/
函数btn_click（）{
artikelId:$（'#artikelId'）.val（）；
//var artikelnummer=sessionStorage.setItem（“artikelId”）；
document.location=index.html；
警报（ArtikerNummer）；
}
函数url（）{
document.location=http://somewhere.com/';
}
})；

普罗杜克特
Übersicht




Honig GmbH 201版权所有