单击flex卡时，打开一个新页面，并以javascript/jquery的样式显示解析后的数据_Javascript_Jquery_Html_Css

单击flex卡时，打开一个新页面，并以javascript/jquery的样式显示解析后的数据

javascript jquery html css

单击flex卡时，打开一个新页面，并以javascript/jquery的样式显示解析后的数据,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试显示url:中的数据。我希望解析后的数据以样式显示，但无法使用windows.open（）进行此操作。你能帮我解决这个问题吗。 html: js: $（函数（）{ var$container=$（'.container'）； $.ajax({ 类型：'GET'，数据类型：“json”，网址：'https://s3-us-west-2.amazonaws.com/digicode-interview/Q1.json', 成功：功能（数据）{ //console.log（data.re

我正在尝试显示url:中的数据。我希望解析后的数据以样式显示，但无法使用windows.open（）进行此操作。你能帮我解决这个问题吗。 html:

js:

$（函数（）{
var$container=$（'.container'）；
$.ajax({
类型：'GET'，
数据类型：“json”，
网址：'https://s3-us-west-2.amazonaws.com/digicode-interview/Q1.json',
成功：功能（数据）{
//console.log（data.recipes）；
var htmlContent=“”；
对于（var i=0；i由于您将要打开一个新窗口，您将丢失样式表，因此您必须按如下所示在文档中编写它：

功能点击功能（食谱）{
让myWindow=window.open（“，”预览“）；
myWindow.document.open（）；
myWindow.document.write（“”）
myWindow.document.write（“”）；
myWindow.document.write（“”）
myWindow.document.write（“
名称：”+recipes.Name+“
”）；
myWindow.document.write（“名称金额”）；
对于（var i=0；i步骤：”+recipes.Steps+”
）；
myWindow.document.write（“
相似菜系：”+菜谱。相似菜系+”
）；
myWindow.document.write（“”）
myWindow.document.close（）；
}
$（函数（）{
var$container=$（'.container'）；
$.ajax({
类型：'GET'，
数据类型：“json”，
网址：'https://s3-us-west-2.amazonaws.com/digicode-interview/Q1.json',
成功：功能（数据）{
//console.log（data.recipes）；
var htmlContent=“”；
//htmlContent+=''；
//htmlContent+=''；
//htmlContent+=''；
对于（var i=0；我知道数据显示正确，但没有所需的样式？请看一下我是否能够在clickFunction中添加一个？是的。我找到了。再次感谢。
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
function clickFunction(recipes){    
    var myWindow = window.open("", "MsgWindow");
    //console.log(recipes);
    myWindow.document.write('<br>Name:'+recipes.name+'<br>');
    myWindow.document.write("<table><tr><th>Name</th><th>Amount</th></tr> 
    </table>");
    for(var i=0; i < recipes.Ingredients.length; i++){
        var name = recipes.Ingredients[i].name;
        var amount = recipes.Ingredients[i].amount;
        myWindow.document.write("<table><tr><td>"+name+"</td><td>"+amount+" 
         </td></tr></table>");
    }
    myWindow.document.write('<br>Steps:'+recipes.steps+'<br>');
    myWindow.document.write('<br>Similar 
    Cuisines:'+recipes.SimilarCuisines+'<br>'); 
    myWindow.document.close();
   }
</script>
</head>
<body>
<div id="root">
    <h1>List of Recipies</h1>
    <div class="container" id="recipebody">
    </div>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/script.js"></script>
</body>

*{
    box-sizing: border-box;
}
body{
    background: url('cutlery.jpg');  
}
#root{
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

.container{
    display: flex;
    flex-wrap: wrap;  
    position: relative;
    padding:10px;
}
h1 {
    text-align: center;
    background-image: linear-gradient(120deg, #fbc2eb 0%, #a6c1ee 100%);
    font-size: 1.5rem;
    padding: 1rem 2rem;
    color: white;
}
.card {
    margin:5px;    
    background: white;
    box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);
    border-radius: 12px;
    overflow: hidden;
    grid-gap:20px;
}
.card:hover {
    box-shadow: 2px 8px 45px rgba(0, 0, 0, .15);
    transform: translate3D(0, -2px, 0);
}
@media screen and (min-width: 600px) {
    .card{
        flex: 1 1 calc(50% - 2rem);
  }
}

@media screen and (min-width: 900px) {
    .card{
        flex: 1 1 calc(33% - 2rem);
  }
}
.card:nth-child(2n) h1 {
    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}

.card:nth-child(4n) h1 {
    background-image: linear-gradient(120deg, #ff9a9e 0%, #fecfef 100%);
}

.card:nth-child(5n) h1 {
    background-image: linear-gradient(120deg, #ffc3a0 0%, #ffafbd 100%);
}

$(function(){
    var $container = $('.container');
    $.ajax({
        type:'GET',
        dataType: 'json',
        url:'https://s3-us-west-2.amazonaws.com/digicode-interview/Q1.json',
        success: function (data) {
            //console.log(data.recipes);
            var htmlContent="";
            for (var i=0; i<data.recipes.length;i++) {
                var recipe = data.recipes[i];

                htmlContent += "<div class=\"card\" 
             onclick='clickFunction("+JSON.stringify(data.recipes[i])+")'>";
                htmlContent += "<h1>";
                htmlContent += data.recipes[i].name
                htmlContent += "</h1>";
                htmlContent += "</div>";
            }
            document.getElementById("recipebody").innerHTML = htmlContent; 
        }
    });
});