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

Question

I have recently taken up programming and my first task is to create a queue at the post office.我最近开始编程，我的第一个任务是在邮局创建一个队列。 The code kind of works and does everything I need, except, I need the input array elements to be displayed with some style, more like separate squares with names (similarly to the way the buttons are styled), not only in line separated by commas - see the demo below please.代码可以工作并完成我需要的一切，除了，我需要以某种样式显示输入数组元素，更像是带有名称的单独方块（类似于按钮的样式），而不仅仅是在行中以逗号分隔- 请看下面的演示。

 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>

I tried hard to find some hints here but everything seems too complicated for my level of understanding.我努力在这里找到一些提示，但对于我的理解水平来说，一切似乎都太复杂了。 So, if there is no easy way, I would rather ask for some specific materials where I could find how to deal with it.所以，如果没有简单的方法，我宁愿要求一些具体的材料，在那里我可以找到如何处理它。 I am learning through W3Schools and also reading Eloquent Javascript publication, but coulnd't find anything concerning my problem.我正在通过 W3Schools 学习并阅读 Eloquent Javascript 出版物，但找不到与我的问题有关的任何内容。 I hope my question makes sense.我希望我的问题是有道理的。 Also, if you have any idea how to logically improve the code, I am open to any discussion.此外，如果您对如何从逻辑上改进代码有任何想法，我愿意接受任何讨论。

Answer 1

I've tried to keep your code mostly the same.我尽量让你的代码保持不变。 To be able to change the css of a single queue item you need to wrap that item in something (in this example i've used a span )为了能够更改单个队列项目的 css，您需要将该项目包装在某个东西中（在这个例子中我使用了一个span ）

I've created a function createQueueItemsHtml() that returns the array items wrapped in a span now you can use the following css selector to add css to each item #queue span我创建了一个函数createQueueItemsHtml() ，它返回包裹在span的数组项，现在您可以使用以下 css 选择器将 css 添加到每个项#queue span

 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>

Answer 2

You can make your guests into <div> elements and then style those in any way you want or need.您可以将您的客人变成<div>元素，然后以您想要或需要的任何方式设置它们的样式。 (I haven't touched the rest of your code, only the part that was needed for this particular thing) （我没有触及你的其余代码，只有这个特定事物所需的部分）

Just change this bit只需改变这一点

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

To this:对此：

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

What it does is create a <div> element for each item in your guests array, add class="guest" to the element and add the name from your prompt to it.它所做的是为来宾数组中的每个项目创建一个<div>元素，将class="guest"添加到元素并将提示中的名称添加到它。 Then it appends this element to the #queue .然后它将此元素附加到#queue 。

Your HTML would then look like this:您的 HTML 将如下所示：

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

I would suggest changing the <p> to <section> or something like that, just for the sake of semantics.我建议将<p>更改为<section>或类似的东西，只是为了语义。

You can then style these elements like this:然后，您可以像这样设置这些元素的样式：

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

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

问题描述

2 个解决方案

解决方案1
0 2020-09-02 10:20:51

解决方案2
0 2020-09-02 10:23:23

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

问题描述

2 个解决方案

解决方案1 0 2020-09-02 10:20:51

解决方案2 0 2020-09-02 10:23:23

解决方案1
0 2020-09-02 10:20:51

解决方案2
0 2020-09-02 10:23:23