使用JavaScript DOM使用对象数组重写数据属性数组

问题描述 投票：0回答：1

我是JavaScript新手。我想做的是重写我的data-project属性以显示projects数组中的内容，如果projects数组大于6，因为项目框仅假定容纳6。我一直在尝试查找有关DOM的更多信息，但是我没有运气为我的案例找到任何东西。 让我知道是否需要更多代码来帮助您理解。还有一些按钮可以过滤存储在数组（位于不同文件中）中的内容。此文件也导入到我的index.html中。

[此外，如果您有大量的学习DOM的资源，希望将其发送给我。谢谢！

我的HTML

<div class="wrapper">
          <div class="row" data-project="1">
          <img class="logo" src="https://static.vecteezy.com/system/resources/previews/000/350/423/non_2x/vector-checklist-icon.jpg" alt="image">
          <div class="top">
            <h3 class="title">Job Listing</h3>
            <h6 class="language">HTML/CSS</h6>
            <p class="desc">Static Page Containing Job Listings</p>
            </div>

          <div class="bottom">
            <div class="image"> </div>
            <p class="type">Personal</p>
            </div>
            </div>

            <div class="row" data-project="2">
          <img class="logo" src="https://static.vecteezy.com/system/resources/previews/000/350/423/non_2x/vector-checklist-icon.jpg" alt="image">
          <div class="top">
            <h3 class="title">Calculator</h3>
            <h6 class="language">HTML/CSS, JavaScript</h6>
            <p class="desc">Basic JavaScript Calculator</p>
            </div>

          <div class="bottom">
            <div class="image"> </div>
            <p class="type">Personal</p>
            </div>
            </div>
            <div class="row" data-project="3">
          <img class="logo" src="https://static.vecteezy.com/system/resources/previews/000/350/423/non_2x/vector-checklist-icon.jpg" alt="image">
          <div class="top">
            <h3 class="title">TODO</h3>
            <h6 class="language">HTML/CSS, JavaScript, React</h6>
            <p class="desc">Organize your everyday life with this web app made with React</p>
            </div>

          <div class="bottom">
            <div class="image"> </div>
            <p class="type">Personal</p>
            </div>
            </div>
            <div class="row" data-project="4">
          <img class="logo" src="https://static.vecteezy.com/system/resources/previews/000/350/423/non_2x/vector-checklist-icon.jpg" alt="image">
          <div class="top">
            <h3 class="title">Login and Signup</h3>
            <h6 class="language">HTML/CSS</h6>
            <p class="desc">Static Page for logging in and signing up</p>
            </div>

          <div class="bottom">
            <div class="image"> </div>
            <p class="type">Personal</p>
            </div>
            </div>

              <div class="row" data-project="5">
          <img class="logo" src="https://static.vecteezy.com/system/resources/previews/000/350/423/non_2x/vector-checklist-icon.jpg" alt="image">
          <div class="top">
            <h3 class="title">RNG Therapy Site</h3>
            <h6 class="language">WordPress</h6>
            <p class="desc">WordPress site that allows users to schedule appointments.</p>
            </div>

          <div class="bottom">
            <div class="image"> </div>
            <p class="type">Client</p>
            </div>
            </div>

              <div class="row" data-project="6">
          <img class="logo" src="https://static.vecteezy.com/system/resources/previews/000/350/423/non_2x/vector-checklist-icon.jpg" alt="image">
          <div class="top">
            <h3 class="title">Coffee Shop Website</h3>
            <h6 class="language">HTML/CSS, JavaScript, React</h6>
            <p class="desc">Static Page for a Coffee Shop</p>
            </div>

          <div class="bottom">
            <div class="image"> </div>
            <p class="type">Client</p>
            </div>
            </div>
</div>

我的JavaScript（我知道它很乱）

const projectAttributes = [
    document.querySelector('[data-project="1"]'),
    document.querySelector('[data-project="2"]'),
    document.querySelector('[data-project="3"]'),
    document.querySelector('[data-project="4"]'),
    document.querySelector('[data-project="5"]'),
    document.querySelector('[data-project="6"]'),
];

let i = 0;

function domReplaceProjects(projects) {
    console.log(projectAttributes.length);
    //Use projects array size for loop conditional
    if(projects.length <= 6) {
        for(i = 0; i <= projects.length; i++) {
            projectAttributes[i] = `
                  <div class="top">
                    <h3 class="title">${project.name}</h3>
                    <h6 class="language">${project.desc}</h6>
                    <p class="desc">${project.language}</p>
                </div>

                <div class="bottom">
                    <div class="image"> </div>
                    <p class="type">${project.type}</p>
                </div>

                    <div class="row">
                    <img class="logo" src="https://static.vecteezy.com/system/resources/previews/000/350/423/non_2x/vector-checklist-icon.jpg" alt="image">
                 </div>
                `
        }
    }
    //Use data attributes array size for loop conditional
    else {
        for(i = 0; i < projectAttributes.length; i++) {
            //logic here
        }
    }
}
javascript html arrays dom
1个回答
0
投票

动态添加的元素

两种方式

向DOM添加元素的两种最常见的方法是：

  1. 创建元素的htmlString并将其呈现给父元素元素由...

    • [.innerHTML属性，它使用.innerHTML或...覆盖目标元素中的现有HTML

    • htmlString将.insertAdjacentHTML()插入到与目标元素相关的给定位置。

  2. 通过.insertAdjacentHTML()创建一个元素并将其添加到目标元素为htmlString的最后一个子元素。

问题

似乎选项1是OP代码要隐含的。尽管对于document.createElement()的每次迭代都声明了document.createElement()，但是没有明显的属性，方法或函数将.appendChild()呈现为DOM的真实HTML。而且，已经声明了.appendChild()数组（顺便说一句，还有更好的方法可以将元素收集到htmlString或数组中[projectAttributes）。

而且，大约有6个独立的对象实例及其键/值，但是在每次迭代中表示时，当前对象均无法正确显示。传递htmlString作为对象（例如projectAttributes）不是很有效，因为似乎没有一种方法可以处理多个对象。

演示

以下示例具有接受对象数组（例如NodeList，确定迭代限制的数字以及确定布尔值的可选布尔值，该布尔值确定DOM的现有HTML是否被新HTML覆盖）的功能。或将新的HTML插入DOM内，从而保留现有的HTML。还有一个浮点document.querySelectorAll('.row')，将演示三个用法示例（答案的解决方案不需要源的那部分，而且很明显在代码中注明）。更多详细信息在演示中进行了评论。

document.querySelectorAll('.row')
property
{key1: value, key2: value,...}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.