Question

我真的很想明白为什么我的列表没有加载。这是我的json和jquery，以及我的HTML。控制台显示0错误，列表显示为空白。我真的很感激一些帮助，我对这个json事情不熟悉。非常感谢提前！

＆＃13;

// Json array
    var productList = {"products": [
        {"description": "Bata Bordada", "color": "amarelo", "size":"P", "price": "390"},
        {"description": "Chapéu de Praia com Fivela", "color": "cinza", "size":"M", "price": "390"},
        {"description": "Vestido Texturizado", "color": "branco", "size":"G", "price": "390"},
        {"description": "Bata Bordada", "color": "branco", "size":"GG", "price": "390"},
        {"description": "Chapéu de Praia com Fivela", "color": "amarelo", "size":"36", "price": "390"},
        {"description": "Vestido Texturizado", "color": "azul", "size":"38", "price": "390"},
        {"description": "Bata Bordada", "color": "cinza", "size":"40", "price": "390"},
        {"description": "Chapéu de Praia com Fivela", "color": "branco", "size":"42", "price": "390"},
        {"description": "Vestido Texturizado", "color": "cinza", "size":"44", "price": "390"}
    ]
    };


function loadList() {

    var list = $("#ProductList").listview();
    list.sort();

   $(productList.products).each(function(index){
    $(list).append(
        '<li class="product-it"> <article class="product"> <span class="prd-img-wrapper"> <img class="prd-img" src="img/vestido1.jpg"></span> <h2 class="prd-tit">' + this.description + '</h2> <span class="prd-wrap"><span class="prd-price"><span class="prd-prc">' +  this.price + '</span></br> <span class="prd-par">até 5x de R$30,00</span></span><a class="prd-cart" href="#">Adicionar ao carrinho.</a></span></article></li>');
   });

   $(list).listview("refresh");

}

＆＃13;

<!DOCTYPE HTML>
 <html lang="pt-br">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>Teste Vaga Front End</title>
    <link href="css/style.css" rel="stylesheet"/>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script src="js/js.js"></script>
</head>
<body onLoad="loadList()">
<section class="products">
    <header class="products-hdr">
        <h3 class="mobile-btn order">Ordenar</h3>
        <select class="prd-order">
             <option value="MaisRecentes">Mais Recentes</option>
             <option value="MaiorPreco">Maior Preço</option>
             <option value="MenorPreco">Menor Preço</option>
        </select>
    </header>
    <ul id="ProductList" class="product-lt">				
    </ul>
</section>
</body>
</html>

＆＃13;

Answer 1

您正在使用jQuery Mobile！因此，您需要将其包含在您的网页中：jquery.mobile-1.4.5.min.js和jquery.mobile-1.4.5.min.css

请查看此工作演示：

＆＃13;

$postid = get_the_ID();
$current_user = wp_get_current_user();
$has_product = wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->id);

＆＃13;

// Json array
    var productList = {"products": [
        {"description": "Bata Bordada", "color": "amarelo", "size":"P", "price": "390"},
        {"description": "Chapéu de Praia com Fivela", "color": "cinza", "size":"M", "price": "390"},
        {"description": "Vestido Texturizado", "color": "branco", "size":"G", "price": "390"},
        {"description": "Bata Bordada", "color": "branco", "size":"GG", "price": "390"},
        {"description": "Chapéu de Praia com Fivela", "color": "amarelo", "size":"36", "price": "390"},
        {"description": "Vestido Texturizado", "color": "azul", "size":"38", "price": "390"},
        {"description": "Bata Bordada", "color": "cinza", "size":"40", "price": "390"},
        {"description": "Chapéu de Praia com Fivela", "color": "branco", "size":"42", "price": "390"},
        {"description": "Vestido Texturizado", "color": "cinza", "size":"44", "price": "390"}
    ]
    };


function loadList() {

    var list = $("#ProductList").listview();
    list.sort();

   $(productList.products).each(function(index){
    $(list).append(
        '<li class="product-it"> <article class="product"> <span class="prd-img-wrapper"> <img class="prd-img" src="img/vestido1.jpg"></span> <h2 class="prd-tit">' + this.description + '</h2> <span class="prd-wrap"><span class="prd-price"><span class="prd-prc">' +  this.price + '</span></br> <span class="prd-par">até 5x de R$30,00</span></span><a class="prd-cart" href="#">Adicionar ao carrinho.</a></span></article></li>');
   });

   $(list).listview("refresh");

}

＆＃13;

Answer 2

您需要删除.listView()引用。 ~~似乎是某种插件~~可能来自jQuery mobile，你没有包含在你的页面上。因此，为您首选的jquery-mobile.js版本添加一个include，或删除对.listView()的引用，如下所示：

var list = $("#ProductList");

在上下文中：

var productList = {"products": [
        {"description": "Bata Bordada", "color": "amarelo", "size":"P", "price": "390"},
        {"description": "Chapéu de Praia com Fivela", "color": "cinza", "size":"M", "price": "390"},
        {"description": "Vestido Texturizado", "color": "branco", "size":"G", "price": "390"},
        {"description": "Bata Bordada", "color": "branco", "size":"GG", "price": "390"},
        {"description": "Chapéu de Praia com Fivela", "color": "amarelo", "size":"36", "price": "390"},
        {"description": "Vestido Texturizado", "color": "azul", "size":"38", "price": "390"},
        {"description": "Bata Bordada", "color": "cinza", "size":"40", "price": "390"},
        {"description": "Chapéu de Praia com Fivela", "color": "branco", "size":"42", "price": "390"},
        {"description": "Vestido Texturizado", "color": "cinza", "size":"44", "price": "390"}
    ]};

function loadList() {

    var list = $("#ProductList");
    // list.sort(); commented because this won't do anything useful

   $(productList.products).each(function(index){
    $(list).append(
        '<li class="product-it"> <article class="product"> <span class="prd-img-wrapper"> <img class="prd-img" src="img/vestido1.jpg"></span> <h2 class="prd-tit">' + this.description + '</h2> <span class="prd-wrap"><span class="prd-price"><span class="prd-prc">' +  this.price + '</span></br> <span class="prd-par">até 5x de R$30,00</span></span><a class="prd-cart" href="#">Adicionar ao carrinho.</a></span></article></li>');
   });
}

<head>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body onload="loadList()">
<section class="products">
    <!-- header element with select omitted for brevity -->
    <ul id="ProductList" class="product-lt">				
    </ul>
</section>
</body>

为什么我的json产品列表没有加载？

2 个答案: