Question

我有一系列运动项目。我正在尝试从主数组中构建一个类别名称数组。然后将每个类别名称创建为超链接元素，其中onclick触发加载相关产品的函数。我还需要显示一个类别名称的实例，因为它有多个。

当我单击按钮并调用filterCategory（）时，没有显示任何内容。我在Chrome开发者工具中遇到的错误是我打电话：

document.getElementById("brand-category").appendChild(categoriesLink);

......这一行的错误是：

无法在'Node'上执行appendChild：参数1不是类型Node

这是我到目前为止所尝试的内容：

var data = {
"Nike": [
    {
    "id": "1",
    "brand":"Nike",
    "productTitle": "Black Hoody",
    "productImage": "image.jpg",
    "category": "Hoodies",
    "priceBand": "1103", 
    "salePrice": "120.00"},
     {
    "id": "2",
    "brand":"Nike",
    "productTitle": "Running Jacket",
    "productImage": "image.jpg",
    "category": "Jackets",
    "priceBand": "1104", 
    "salePrice": "150.00"}
],

"Sketchers": [
    {
    "id": "3",
    "brand":"Sketchers",
    "productTitle": "Running Shoes Style 1",
    "productImage": "image.jpg",
    "category": "Running Shoes",
    "priceBand": "1103", 
    "salePrice": "120.00"},
     {
    "id": "4",
    "brand":"Sketchers",
    "productTitle": "Running Shoes Style 2",
    "productImage": "image.jpg",
    "category": "Running Shoes",
    "priceBand": "1102", 
    "salePrice": "90.00"}

]}  

function filterCategory() {
//build an array of unique category names from the main array.  
//create an element and assign the category name as a link
//on click, load the associated products from that category

var categories, categoriesLink;

for(categories in data) {
    categoriesLink = document.createElement("a");
    categoriesLink.innerHTML = categories;
    categoriesLink.categories_Arr=data[categories];
        categoriesLink = function() {
            var catsContainer=document.getElementById('brand-category');
            var categories_Arr=this.categories_Arr, i, I=categories_Arr.length, item;
            var catOutput="";
            for(i=0; i<I; I++) 
            {
                item=categories_Arr[i];
                 catOutput+= "<img src=\""+item.logo+"\"/>" +  item.id + item.productTitle + item.productDescription + "<img src=\""+item.productImage+"\"/>" + item.rrp + item.salePrice + "<br>";
             }

            catsContainer.innerHTML=catOutput;
            catsContainer.style.display="block";
            return false;
        }

        document.getElementById("brand-category").appendChild(categoriesLink);
    }
}

<div id='cat'><button id='filterCategory' name='filterCategory' value='Category' onclick="filterCategory();">Category</button></div>


<div id="brand-category"></div>

任何帮助都非常感激。

干杯

Answer 1

＆＃34; categoriesLink = function（）＆＃34; ，你试图在你的HTML上添加功能。这就是为什么抛出错误＆＃34;参数1不属于节点类型＆＃34;要么你可以改变功能名称，要么你可以使用追加来显示不好的整个功能。见下面的片段

＆＃13;

var data = {
"Nike": [
    {
    "id": "1",
    "brand":"Nike",
    "productTitle": "Black Hoody",
    "productImage": "image.jpg",
    "category": "Hoodies",
    "priceBand": "1103", 
    "salePrice": "120.00"},
     {
    "id": "2",
    "brand":"Nike",
    "productTitle": "Running Jacket",
    "productImage": "image.jpg",
    "category": "Jackets",
    "priceBand": "1104", 
    "salePrice": "150.00"}
],

"Sketchers": [
    {
    "id": "3",
    "brand":"Sketchers",
    "productTitle": "Running Shoes Style 1",
    "productImage": "image.jpg",
    "category": "Running Shoes",
    "priceBand": "1103", 
    "salePrice": "120.00"},
     {
    "id": "4",
    "brand":"Sketchers",
    "productTitle": "Running Shoes Style 2",
    "productImage": "image.jpg",
    "category": "Running Shoes",
    "priceBand": "1102", 
    "salePrice": "90.00"}

]}  

function filterCategory() {
//build an array of unique category names from the main array.  
//create an element and assign the category name as a link
//on click, load the associated products from that category

var categories, categoriesLink;

for(categories in data) {
    categoriesLink = document.createElement("a");
    categoriesLink.innerHTML = categories;
    categoriesLink.setAttribute('href', '');
    categoriesLink.categories_Arr=data[categories];
        var categoriesLinks = function() {
            var catsContainer=document.getElementById('brand-category');
            var categories_Arr=this.categories_Arr, i, I=categories_Arr.length, item;
            var catOutput="";
            for(i=0; i<I; I++) 
            {
                item=categoreis_Arr[i];
                 catOutput+= "<img src=\""+item.logo+"\"/>" +  item.id + item.productTitle + item.productDescription + "<img src=\""+item.productImage+"\"/>" + item.rrp + item.salePrice + "<br>";
             }

            catsContainer.innerHTML=catOutput;
            catsContainer.style.display="block";
            return false;
        }

        document.getElementById("brand-category").appendChild(categoriesLink);
    }
}

＆＃13;

<div id='cat'><button id='filterCategory' name='filterCategory' value='Category' onclick="filterCategory();">Category</button></div>


<div id="brand-category"></div>

＆＃13;

回答你的问题是你所做的是，在你的每个循环中，你从对象中提取密钥并将其分配给innerHTML。所以不要做categoriesLink.innerHTML = categories;而应该做那样的事情： categoriesLink.innerHTML = data[categories]["0"].category;

Javascript创建类别超链接的数组

1 个答案: