Javascript将数据输入到名片中
Javascript将数据输入到名片中
提问于 2021-01-31 23:05:29
我有一个名为“列”的类下的名片。我在JavaScript中使用了带有for循环的克隆函数来增加名片的数量，这样我就不必每次创建新卡时都要重新键入代码。如何使用JavaScript访问每张名片并输入/编辑每张名片中的数据？在任何需要输入数据的地方，我在下面的代码中输入了“数据在这里”。目前，我有8张名片使用克隆属性。因为我是新手，我不知道这是否是最好的方法。如果有更好的方法请告诉我。非常感谢。
主要目标:我想在不同的名片中显示不同的数据，但我不想重写每个名片的HTML代码，因为HTML代码变得非常长。例如，名片1将具有与名片2不同的数据。
$(document).ready(function() {
var e = $('.column');
for (var i = 0; i < 7; i++) {
e.clone().insertAfter(e);
e.clone[i].attr('id', 'clone' + i++);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column" id="column">
<div class="container">
<div class="header"> <h3>"DATA HERE" </h3> </div>
<div class="location">
<h1><ion-icon class ="icon1" name="location-outline" class="nav__icon"></ion-icon> "DATA HERE" </h1>
</div>
<form method="post" > <p>
<button type="button" class="button3"> LIGHTS</button></a>
<a href="DATA HERE"><button class="button">ON</button></a> </p>
</form>
<form method="post" > <p>
<a href="DATA HERE"><button type="button" class="button2">OFF</button></a> </p>
</form>
<div class="icon-bar">
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE" </a>
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE"</a>
</div>
<div class="icon-bar2">
<a class="active" href="#"> "DATA HERE" </a>
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE"</a>
</div>
</div>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-02-01 00:14:03
现在，您可以使用querySelectorAll查找.column类，然后可以用索引将代码设置为每个选择器，从0开始到1，在情况下以7结尾。
这里有一个例子来说明我的意思--试试这个片段
编辑：用所有需要的区域更改代码段。
下面是第一个容器上所有内容控件的示例，您可以使用所需的
试试这段片段。
$(document).ready(function() {
var e = $('.column');
for (var i = 0; i < 7; i++) {
e.clone().insertAfter(e);
}
//selecting the first Container with variables
const allcls = document.querySelectorAll('.column');
const chld = allcls[0].querySelector('.header > h3');
const chld2 = allcls[0].querySelector('.location > h1');
const chld3 = allcls[0].querySelectorAll('form');
const frmchld = chld3[0].querySelector('p :nth-child(2)');
const frmchld2 = chld3[1].querySelector('p :nth-child(1)');
const chld4 = allcls[0].querySelectorAll('.icon-bar .active');
const chld5 = allcls[0].querySelectorAll('.icon-bar2 .active');
/* set data for each element */
//.header text with new style
chld.innerText = "New Text for Header";
chld.style.color = 'gray';
chld.style.textAlign = 'center';
chld.style.margin = 'auto';
chld.style.padding = '1rem';
chld.style.background = 'darkblue';
chld.style.width = 'max-content';
chld.style.border = '1px solid darkgray';
//.location text with new color
chld2.innerText = 'Location text';
chld2.style.color = 'darkblue';
//ON button link + name
frmchld.setAttribute('onClick', '#NEWLINK_FOR_ON');
frmchld.innerText = "ON Button";
//off button link + name
frmchld2.setAttribute('onClick', '#NEWLINK2_FOR_ON');
frmchld2.innerText = "OFF Button";
//icon-bar links ( names + href )
chld4[0].innerText = "Iconbar Link1";
chld4[1].innerText = 'Iconbar link2';
chld4[2].innerText = 'Iconbar link3';
chld4[3].innerText = 'Iconbar link4';
chld4[0].setAttribute('href', '#Link_1');
chld4[1].setAttribute('href', '#Link_2');
chld4[2].setAttribute('href', '#Link_3');
chld4[3].setAttribute('href', '#Link_4');
//icon-bar2 links ( names + href )
chld5[0].innerText = "Iconbar2 Link1";
chld5[1].innerText = 'Iconbar2 link2';
chld5[2].innerText = 'Iconbar2 link3';
chld5[0].setAttribute('href', '#Link_1');
chld5[1].setAttribute('href', '#Link_2');
chld5[2].setAttribute('href', '#Link_3');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column" id="column">
<div class="container">
<div class="header">
<h3>"DATA HERE" </h3>
</div>
<div class="location">
<h1>
<ion-icon class="icon1" name="location-outline" class="nav__icon"></ion-icon> "DATA HERE" </h1>
</div>
<form method="post">
<p>
<button type="button" class="button3"> LIGHTS</button>
<button class="button" onClick="#">ON</button> </p>
</form>
<form method="post">
<p>
<button type="button" class="button2" onClick="#">OFF</button> </p>
</form>
<div class="icon-bar">
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE" </a>
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE"</a>
</div>
<div class="icon-bar2">
<a class="active" href="#"> "DATA HERE" </a>
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE"</a>
</div>
</div>
</div>
Stack Overflow用户
发布于 2021-02-01 02:36:50
我不知道你最后的问题是什么，但我想你是在尝试这样做：
$(document).ready(function() {
var e = document.getElementById("column");
for (var i = 0; i < 7; i++) {
var newe=e.cloneNode(true);
document.body.insertAdjacentElement('beforeend', newe);
newe.id="column"+i;
}希望它有所帮助，也许您正在学习，但是如果数据来自数据库，那么这个解决方法是没有用的(您将通过这个HTML函数打印出来)。继续生长，+Ultra！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65985179
复制相关文章
相似问题
腾讯云开发者
