Question

我正在学习如何建立一个网站，我遇到以下问题码。我无法弄清楚它到底发生了什么。我正在使用visual studio代码来编写它。

var HtmlCode = {

    GetMenuItem:function(item){

        let plg = item.choices[0];
        let prg = item.choices[1];
        let lbl_plg = '${item.type} - ${item.name} - ${plg.size}';
        let lbl_prg = '${item.type} - ${item.name} - ${prg.size}';

        return  '<div class= "menu-item"> <div><div><img src="${item.img}"></div><div>${item.name}</div> </div><div>${item.descr}</div> <div> <div act="add2order" id="${plg.id}" cost="${plg.cost}" lbl="${plg_lbl}" title="Click to order">${plg.txt}</div> <div act="add2order" id="${prg.id}" cost="${prg.cost}" lbl="${prg_lbl}" title="Click to order">${prg.txt}</div> </div> </div>';

        }
    
        }

当我清理（返回）并将其放入时，我不必向右滚动，我在visual studio代码编辑器中会遇到各种错误。我现在在一行中将它们全部放在一起，如示例中所示，它返回一些内容但它不会返回菜单项。我收到了所有项目，例如$ {item.name}等，但没有img或菜单中的任何内容。

var App = {

    Menu:null,

    Init:function(){


        this.Menu = JoesPizza.Menu;
        $("#PizzaOrderSubmit").click(this.OrderNext);
    
    },

    LoadMenu:function(){

        $("#MenuItemList").html("");

        this.Menu.items.forEach(item => {
            let html = HtmlCode.GetMenuItem(item);
            $("#MenuItemList").append(html);
            

        });

        // attach click events to new menu items
    }
}

var JoesPizza = JoesPizza||{};

JoesPizza.Menu = {"items":[

    {"type":"Pizza", "name":"Cheese", "descr":"Marinara sauce topped with whole milk mozzarella cheese.", 
        "choices":[{"id":"pizza-cheese-lg", "size":"Large", "cost":22.99, "txt":"Large: $22.99"},
            {"id":"pizza-cheese-rg", "size":"Regular", "cost":18.99, "txt":"Regular: $18.99"}],
            "img":"/imgs/cheese.png"},
        
    {"type":"Pizza", "name":"Pepperoni", "descr":"Marinara sauce with authentic old-world style pepperoni.", 
        "choices":[{"id":"pepp-lg", "size":"Large", "cost":23.99, "txt":"Large: $23.99"},
                    {"id":"pepp-rg", "size":"Regular", "cost":19.99, "txt":"Regular: $19.99"}],
                    "img":"/imgs/pepperoni.png"},
        
    {"type":"Pizza", "name":"Meat Lover's", "descr":"Marinara sauce, authentic pepperoni, natural Italian sausage, roasted ham, smoked bacon, pork and beef.", 
        "choices":[{"id":"meat-lg", "size":"Large", "cost":23.99, "txt":"Large: $23.99"},
                    {"id":"meat-rg", "size":"Regular", "cost":19.99, "txt":"Regular: $19.99"}],
                    "img":"/imgs/meat.png"},
        
    {"type":"Pizza", "name":"Supreme", "descr":"Marinara sauce, pepperoni, pork, beef,fresh mushrooms, fresh green bell peppers and fresh red onions.", 
        "choices":[{"id":"supr-lg", "size":"Large", "cost":23.99, "txt":"Large: $23.99"},
                    {"id":"supr-rg", "size":"Regular", "cost":19.99, "txt":"Regular: $19.99"}],
                    "img":"/imgs/supreme.png"},
    
    {"type":"Wings", "name":"Traditional Bone-in", "descr":"Classic, juicy bone-in wings served perfectly crispy and tossed in your choice of signature sauce.", 
        "choices":[{"id":"wings-trad-12", "size":"12 Pieces", "cost":11.99, "txt":"12 Wings: $11.99"},
                    {"id":"wings-trad-08", "size":"8 Pieces", "cost":8.99, "txt":"8 Wings: $8.99"}],
                    "img":"/imgs/wings.png"}
                    
]};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8"/>
    <title>Joe's Pizza</title>
    <link type="text/css" rel="stylesheet" href="/css/app.css"/>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="/js/menu.js"></script>
    <script type="text/javascript" src="/js/html-templates.js"></script>
    <script type="text/javascript" src="/js/app.js"></script>
</head>
<body>

    <!-- top banner -->
        <div class="page-top">
                <img src="/imgs/pizza.png" title="Pizza Picture"/>
                <span>joe's pizza</span>
                <a href="/">
                    <img src="/imgs/home.png"></a>
            </div>
   
            <!-- page body -->
        <div class="page-body">

            <div class="side-left">
                <div id="PizzaMenuHtml">
                    <fieldset id="PizzaMenu">
                        <legend>menu</legend>
                        <div id="MenuItemList">
                        </div>
                    </fieldset>
                </div>

            </div>

            <div class="side-right">
                <fieldset id="PizzaOrder">
                    <legend>your order</legend>
                    <div id="PizzaOrderItems">

                    </div>
                    <div id="PizzaOrderSummary">
                        <div>Order Total:</div>
                        <div></div>
                    </div>
                    <div id="PizzaOrderSubmit">Next >>></div>
                </fieldset>
            </div>



        </div>

        <div class="page-footer">

        </div>
    <script type="text/javascript">

        App.Init();
        App.LoadMenu();
    </script>
</body>
</html>

Answer 1

当我清理（返回）并将其放入时，我不必向右滚动，我在visual studio代码编辑器中会遇到各种错误。

字符串，就像你的回归一样，必须在同一行开始和结束。新语法现在允许这样做，但你必须用一个反引号包围你的字符串。这一切都在这里解释：Creating multiline strings in JavaScript

看来你打算在第一个块中使用反引号，因为你还使用了模板替换语法 - 这也只能在反引号中起作用。

也许当你用反引号更改所有这些单引号时，它会起作用，并使你的返回更具可读性。

JavaScript网站问题

1 个答案: