HTML类别没有出现

时间：2019-05-03 11:37:03

标签： javascript jquery html css

我正在使用一个导航菜单，该菜单是根据我作为字典数组拥有的数据而构建的。 在从数组获取，解析和排序数据之后，我遇到了问题。我想从jQuery循环构建HTML。在控制台中，我看到了所有HTML元素：

enter image description here

但是，我没有在页面上看到它们。

我的代码：

var mokData = [
{ mainCategory: "Technical", subCategory: "Material", id: 'UPDT-1-1', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Technical", subCategory: "Material", id: 'UPDT-1-2', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0  },
{ mainCategory: "Technical", subCategory: "Tool", id: 'UPDT-1-3', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0  },
{ mainCategory: "Organizational", subCategory: "Tool", id: 'UPDT-4-1', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0  },
{ mainCategory: "Organizational", subCategory: "Tool", id: 'UPDT-3-2', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0  },
{ mainCategory: "Organizational", subCategory: "Tool", id: 'UPDT-11-1', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0  },
{ mainCategory: "Organizational", subCategory: "Tool", id: 'UPDT-12-11', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Organizational", subCategory: "Tool", id: 'UPDT-12-11', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Organizational", subCategory: "Equipment", id: 'UPDT-12-13', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Operator", subCategory: "Equipment", id: 'UPDT-12-17', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Operator", subCategory: "Equipment", id: 'UPDT-2-11', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Operator", subCategory: "Equipment", id: 'UPDT-1-1', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Operator", subCategory: "Equipment", id: 'UPDT-122-121', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Operator", subCategory: "Equipment", id: 'UPDT-122-111', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Operator", subCategory: "Material", id: 'UPDT-122-111', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Other", subCategory: "Material", id: 'UPDT-122-111', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Other", subCategory: "Material", id: 'UPDT-122-111', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Other", subCategory: "Tool", id: 'UPDT-1-11', name: 'Brakedown of line', clicked: 0 }
];

var parseCategorys = [...mokData.reduce((c, { mainCategory, subCategory }) => {
if (!c.has(mainCategory)) c.set(mainCategory, { mainCategory, subCategory: [] });
c.get(mainCategory).subCategory.push(subCategory);
return c;
}, new Map()).values()];


$(document).ready(function () {
$('.category_list .category_item[category="all"]').addClass('ct_item-active');

$('.category_item').click(function () {
    var catProduct = $(this).attr('category');
    console.log(catProduct);
    
    
    $.each(parseCategorys, function (i, data) {
        if (catProduct === data.mainCategory) {
            var uniqueNames = [];
            $.each(data.subCategory, function (i, el) {
                if ($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
            });

            $.each(uniqueNames, function (i, data) {
                console.log(data);
                var subCategoryBuild = '<div class="product-item" category="' + data + '"><div class="categoryLink"><a href="#' + data + '">' + data +'</a></div></div>';
                console.log(subCategoryBuild);
                $('.products-list').append(subCategoryBuild);
            });

           
        }

    });

    
    $('.category_item').removeClass('ct_item-active');
    $(this).addClass('ct_item-active');

    $('.product-item').css('transform', 'scale(0)');
    function hideProduct() {
        $('.product-item').hide();
    } setTimeout(hideProduct, 400);

    function showProduct() {
        $('.product-item[category="' + catProduct + '"]').show();
        $('.product-item[category="' + catProduct + '"]').css('transform', 'scale(1)');
    } setTimeout(showProduct, 400);
});
});

function creatingNavigationList() {
$.each(parseCategorys, function (i, data) {
    var categoryBuild = '<a href="#" class="category_item" category="' + data.mainCategory + '">' + data.mainCategory + '</a>';
    $('.cteatinMainCategory').append(categoryBuild);
});
}

creatingNavigationList()
.wrap {
    max-width: 1100px;
    width: 90%;
    margin: auto;
}

.wrap > h1 {
    color: #494B4D;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 15px 0px;
}

.wrap > h1:after {
    content: '';
    width: 100%;
    height: 1px;
    background: #C7C7C7;
    margin: 20px 0;
}

.store-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.category_list {
    display: flex;
    flex-direction: column;
    width: 30%;
}

.category_list .category_item {
    display: block;
    width: 100%;
    padding: 15px 0;
    margin-bottom: 20px;
    background: #E84C3D;
    text-align: center;
    text-decoration: none;
    color: #fff;
}

.category_list .ct_item-active {
    background: #2D3E50;
}

.products-list {
    width: 70%;
    display: flex;
    flex-wrap: wrap;
}


.products-list .product-item {
    width: 35%;
    margin-left: 3%;
    margin-bottom: 25px;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.22);
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: flex-start;
    transition: all .4s;
}

.products-list .product-item img {
    width: 100%;
}

.products-list .product-item a {
    display: block;
    width: 100%;
    padding: 8px 0;
    background: #2D3E50;
    color: #fff;
    text-align: center;
    text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div class="wrap">
            <div class="store-wrapper">
                <div class="category_list">
                    <div class="cteatinMainCategory"></div>
                </div>
                <div class="container2">
                    <div class="section2">
                        <div class="scrollable-content content">
                            <section class="products-list">
                                <div id="creatingSubcat"></div>
                            </section>
                        </div>
                    </div>
                </div>
            </div>
        </div>

如您所见，在控制台上，我有HTML元素，但它们未显示在页面上。

它无法从JS文件中使用，但是如果我手动将以下代码放到页面上，它将起作用：

<div class="product-item" category="Material"><div class="categoryLink"><a href="#Material">Material</a></div></div>

1 个答案:

答案 0 :(得分：1)

您的JavaScript似乎确实存在很多错误。在category_item的onclick函数中。

您的函数hideProduct和showProduct都在单击时被调用，导致子类别在隐藏后立即显示。 另外，将所有.product-item的比例尺设置为0，以使div的宽度为0，因此无法显示它们。

附带说明：如果使用show()和hide()函数，则不应添加比例更改以隐藏或显示项目。另外，您应该考虑一次填充HTML，如果可能的话，不要单击，因为现在您的方式可以无限地在HTML内部添加越来越多的节点。

var mokData = [
{ mainCategory: "Technical", subCategory: "Material", id: 'UPDT-1-1', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Technical", subCategory: "Material", id: 'UPDT-1-2', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0  },
{ mainCategory: "Technical", subCategory: "Tool", id: 'UPDT-1-3', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0  },
{ mainCategory: "Organizational", subCategory: "Tool", id: 'UPDT-4-1', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0  },
{ mainCategory: "Organizational", subCategory: "Tool", id: 'UPDT-3-2', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0  },
{ mainCategory: "Organizational", subCategory: "Tool", id: 'UPDT-11-1', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0  },
{ mainCategory: "Organizational", subCategory: "Tool", id: 'UPDT-12-11', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Organizational", subCategory: "Tool", id: 'UPDT-12-11', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Organizational", subCategory: "Equipment", id: 'UPDT-12-13', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Operator", subCategory: "Equipment", id: 'UPDT-12-17', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Operator", subCategory: "Equipment", id: 'UPDT-2-11', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Operator", subCategory: "Equipment", id: 'UPDT-1-1', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Operator", subCategory: "Equipment", id: 'UPDT-122-121', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Operator", subCategory: "Equipment", id: 'UPDT-122-111', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Operator", subCategory: "Material", id: 'UPDT-122-111', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Other", subCategory: "Material", id: 'UPDT-122-111', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Other", subCategory: "Material", id: 'UPDT-122-111', name: 'Brakedown of machine Brakedown of machine Brakedown of machine', clicked: 0 },
{ mainCategory: "Other", subCategory: "Tool", id: 'UPDT-1-11', name: 'Brakedown of line', clicked: 0 }
];

var parseCategorys = [...mokData.reduce((c, { mainCategory, subCategory }) => {
if (!c.has(mainCategory)) c.set(mainCategory, { mainCategory, subCategory: [] });
c.get(mainCategory).subCategory.push(subCategory);
return c;
}, new Map()).values()];


$(document).ready(function () {
$('.category_list .category_item[category="all"]').addClass('ct_item-active');

$('.category_item').click(function () {
    var catProduct = $(this).attr('category');
    //console.log(catProduct);
    
    
    $.each(parseCategorys, function (i, data) {
        if (catProduct === data.mainCategory) {
            var uniqueNames = [];
            $.each(data.subCategory, function (i, el) {
                if ($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
            });

            $.each(uniqueNames, function (i, data) {
                //console.log(data);
                var subCategoryBuild = '<div class="product-item" category="' + data + '"><div class="categoryLink"><a href="#' + data + '">' + data +'</a></div></div>';
                //console.log(subCategoryBuild);
                $('.products-list').append(subCategoryBuild);
            });

           
        }

    });

    
    $('.category_item').removeClass('ct_item-active');
    $(this).addClass('ct_item-active');

    //$('.product-item').css('transform', 'scale(0)');
    function hideProduct() {
        //console.log("hide");
        $('.product-item').hide();
    };
    //setTimeout(hideProduct, 400);

    function showProduct() {
        //console.log("show");
        $('.product-item[category="' + catProduct + '"]').show();
        $('.product-item[category="' + catProduct + '"]').css('transform', 'scale(1)');
    };
    setTimeout(showProduct, 400);
});
});

function creatingNavigationList() {
$.each(parseCategorys, function (i, data) {
    var categoryBuild = '<a href="#" class="category_item" category="' + data.mainCategory + '">' + data.mainCategory + '</a>';
    $('.cteatinMainCategory').append(categoryBuild);
});
}

creatingNavigationList()
.wrap {
    max-width: 1100px;
    width: 90%;
    margin: auto;
}

.wrap > h1 {
    color: #494B4D;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 15px 0px;
}

.wrap > h1:after {
    content: '';
    width: 100%;
    height: 1px;
    background: #C7C7C7;
    margin: 20px 0;
}

.store-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.category_list {
    display: flex;
    flex-direction: column;
    width: 30%;
}

.category_list .category_item {
    display: block;
    width: 100%;
    padding: 15px 0;
    margin-bottom: 20px;
    background: #E84C3D;
    text-align: center;
    text-decoration: none;
    color: #fff;
}

.category_list .ct_item-active {
    background: #2D3E50;
}

.products-list {
    width: 70%;
    display: flex;
    flex-wrap: wrap;
}


.products-list .product-item {
    width: 35%;
    margin-left: 3%;
    margin-bottom: 25px;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.22);
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: flex-start;
    transition: all .4s;
}

.products-list .product-item img {
    width: 100%;
}

.products-list .product-item a {
    display: block;
    width: 100%;
    padding: 8px 0;
    background: #2D3E50;
    color: #fff;
    text-align: center;
    text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div class="wrap">
            <div class="store-wrapper">
                <div class="category_list">
                    <div class="cteatinMainCategory"></div>
                </div>
                <div class="container2">
                    <div class="section2">
                        <div class="scrollable-content content">
                            <section class="products-list">
                                <div id="creatingSubcat"></div>
                            </section>
                        </div>
                    </div>
                </div>
            </div>
        </div>

相关问题
最新问题