如何分别设置数组元素的样式

我最近开始编程，我的第一项任务是在邮局创建一个队列。该代码可以工作并完成我需要的一切，除了，我需要输入数组元素以某种样式显示，更像是用名称分隔的正方形(类似于按钮的样式(，而不仅仅是用逗号分隔的行-请参阅下面的演示。

var guests = new Array(); 
for (var i=0;i<10;i++){  
guests[i] = prompt("Enter your name");
if (guests[0] == null) {
alert("No guests in a queue");
break;
} else if (guests[i] == null) {
break; 
} else {
document.getElementById("queue").innerHTML=guests;
}
} 
function removePeople() {
guests.shift();
document.getElementById("queue").innerHTML=guests;
}

function reversePeople() {
guests.reverse();
document.getElementById("queue").innerHTML=guests;
}

button:hover {
background-color:beige;
color:black;
}
.button {
background-color: green;
border: 2px solid black;
border-radius:4px;
color: white;
padding: 5px 15px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
}

<body>
<p id="queue"></p>
<button class="button" onclick ="removePeople()">Next</button>
<button class="button" onclick ="reversePeople()">Reverse</button>
</body>

我试着在这里找到一些暗示，但对于我的理解水平来说，一切似乎都太复杂了。所以，如果没有简单的方法，我宁愿找一些具体的材料，在那里我可以找到如何处理它。我正在W3Schools学习，也在阅读Eloquent Javascript出版物，但找不到任何与我的问题有关的东西。我希望我的问题有道理。此外，如果您对如何从逻辑上改进代码有任何想法，我愿意进行任何讨论。

我试着让您的代码基本保持不变。为了能够更改单个队列项目的css，您需要将该项目包装在某种东西中(在本例中，我使用了span(

我已经创建了一个函数createQueueItemsHtml()，它返回封装在span中的数组项，现在您可以使用下面的css选择器向每个项#queue span添加css

var guests = new Array();
for (var i = 0; i < 3; i++) {
var guestInput = prompt("Enter your name");
if(guestInput != "") {
guests[i] = guestInput;
}
if (guests[0] == null) {
alert("No guests in a queue");
break;
} else if (guests[i] == null) {
break;
} else {
document.getElementById("queue").innerHTML = createQueueItemsHtml();
}
}
function removePeople() {
guests.shift();
document.getElementById("queue").innerHTML = createQueueItemsHtml();
}
function reversePeople() {
guests.reverse();
document.getElementById("queue").innerHTML = createQueueItemsHtml();
}
function createQueueItemsHtml() {
let queueString = "";
for (var ii = 0; ii < guests.length; ii++) {
queueString += "<span>" + guests[ii] + "</span>";
}
return queueString;
}

button:hover {
background-color: beige;
color: black;
}
.button {
background-color: green;
border: 2px solid black;
border-radius: 4px;
color: white;
padding: 5px 15px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
}
#queue span {
background-color: green;
border: 2px solid black;
border-radius: 4px;
color: white;
padding: 5px 15px;
}

<p id="queue"></p>
<button class="button" onclick ="removePeople()">Next</button>
<button class="button" onclick ="reversePeople()">Reverse</button>

您可以将访客制作成<div>元素，然后以任何您想要或需要的方式对其进行样式设置。(我还没有触及你的代码的其余部分，只触及这个特定东西所需的部分(

只需更改此位

else {
document.getElementById("queue").innerHTML=guests;
}

对此：

} else {
var guest = document.createElement('div');
guest.classList.add('guest');
guest.innerHTML = guests[i];
document.getElementById("queue").appendChild(guest);
}

它所做的是为guests数组中的每个项目创建一个<div>元素，将class="guest"添加到该元素中，并在提示中添加名称。然后将该元素附加到#queue中。

然后，您的HTML将如下所示：

<p id="queue">
<div class="guest">john</div>
<div class="guest">doe</div>
</p>

为了语义起见，我建议将<p>更改为<section>或类似的内容。

然后你可以这样设计这些元素：

.guest { 

}

var guests = new Array();
for (var i=0;i<10;i++){
guests[i] = prompt("Enter your name");
if (guests[0] == null) {
alert("No guests in a queue");
break;
} else if (guests[i] == null) {
break;
} else {
var guest = document.createElement('div');
guest.classList.add('guest');
guest.innerHTML = guests[i];
document.getElementById("queue").appendChild(guest);
}
}

guest:hover {
background-color:beige;
color:black;
}

.guest {
background-color: green;
border: 2px solid black;
border-radius:4px;
color: white;
padding: 5px 15px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
display: inline-block
}

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>
<p id="queue"></p>
</body>
</html>

相关内容

最新更新

热门标签：