EJS：将样式添加到Infinite中，以通过其ID列表中的项目进行项目
我正在尝试使用其ID字段在网页上的待办事项中添加样式。
<body>
<h1><%- dayType %></h1>
<ul class="tasks">
<% for(i = 0 ; i < data.length ; i++){ %>
<input id='label-<%-i+1%>' type='checkbox'/>
<label for="label-<%-i+1%>"><li><%- data[i] %></li></label>
<% } %>
<li>
<form action="/" method="post">
<input type="text" placeholder="Enter To Do Item" name="items">
<input type="submit" value="Submit">
</form>
</li>
</ul>
#label-1:checked ~ label[for=label-1],
#label-2:checked ~ label[for=label-2],
#label-3:checked ~ label[for=label-3],
#label-4:checked ~ label[for=label-4],
#label-5:checked ~ label[for=label-5]{
background: #6d335c;
border-bottom: 1px solid #34495E;
color: #d37b79;
}
当选中“ do do”项目的复选框时，将更改与DO ITEM的样式相对应的。但是，我只能更改有限数量的项目的样式，因为在CSS中，我们必须将每个样式的样式用于执行项目ID。 我希望该网站输入尽可能多的项目，并且其复选框可以完美运行。 如何实现这一目标？
I am trying to add styles to To-do items on my web page using their id field.
<body>
<h1><%- dayType %></h1>
<ul class="tasks">
<% for(i = 0 ; i < data.length ; i++){ %>
<input id='label-<%-i+1%>' type='checkbox'/>
<label for="label-<%-i+1%>"><li><%- data[i] %></li></label>
<% } %>
<li>
<form action="/" method="post">
<input type="text" placeholder="Enter To Do Item" name="items">
<input type="submit" value="Submit">
</form>
</li>
</ul>
In the code where I am using for loops, there is a checkbox and label to which I am adding styles. My css looks like this:
#label-1:checked ~ label[for=label-1],
#label-2:checked ~ label[for=label-2],
#label-3:checked ~ label[for=label-3],
#label-4:checked ~ label[for=label-4],
#label-5:checked ~ label[for=label-5]{
background: #6d335c;
border-bottom: 1px solid #34495E;
color: #d37b79;
}
When a checkbox of a to do item is checked, the corresponding to do item's style is changed. However, I am able to only change the style of a limited number of to do items because in css, we have to hard code the style for each To do item's id.
I want the website to enter as many to do items as possible and their checkboxes to run perfectly.
How to achieve this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
开始的所有属性中选择所有元素
您可以使用一个选择器，该选择器将从指定字符串 noreferrer“> mdn
在您的情况下：
但是，除非您必须通过ID区分这些元素的原因，否则我建议您改用类。然后，您可以绝对确定自己获得了正确的元素集。
You could use a selector which will select all elements with an attribute starting with a specified string
see MDN
In your case:
However, unless there is a reason why you have to distinguish between those elements by id, I'd suggest you use a class instead. Then you can be absolutely sure you are getting the right set of elements.
您不必为每个标签硬编码CSS。您只需将属性添加到
＆lt; ul class =“ tasks”＆gt;parent element的所有子女元素中。您的任务类中的输入标签。you dont have to hard code CSS for every label. You can just add the properties to all children elements of your
<ul class="tasks">parent element.For e.g.tasks input {}will select all the input tags inside your tasks class.