javascript - 不显示 HTML 类别

Question

我正在使用一个导航菜单，它是根据数据构建的，我有一个字典数组。 在从数组中获取、解析和排序数据后，我遇到了问题。我想从 jQuery 循环构建 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() {
        $('.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>

Answer 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>