本文档旨在解决在动态生成的HTML表格中实现星级评分时遇到的问题，重点讲解如何确保每个表格行中的星级评分组件独立工作，互不影响。通过修改HTML元素的id和name属性，使每个评分组件具有唯一标识符，从而实现独立评分功能。
问题分析
在动态生成的HTML表格中，如果每个表格行中的星级评分组件的 id 和 name 属性都相同，那么当用户在某一行进行评分时，会影响到其他行的评分状态。这是因为浏览器无法区分这些具有相同 id 和 name 属性的元素，导致操作行为互相干扰。
解决方案：确保ID和Name属性的唯一性
为了解决这个问题，我们需要确保每个表格行中的星级评分组件的 id 和 name 属性都是唯一的。一种常见的做法是将事件名称（或者其他能够唯一标识每一行的属性）添加到 id 和 name 属性中，从而区分不同的评分组件。
代码示例
以下是如何修改JavaScript代码，以确保每个评分组件的 id 和 name 属性都是唯一的：
立即学习“前端免费学习笔记（深入）”；
$(document).ready(function () {
function addData() {
var eventname = $("#eventname").val();
var eventdate = $("#eventdate").val();
var eventloc = $("#eventloc").val();
var eventauthor = $("#eventauthor").val();
var eventdesc = $("#eventdesc").val();
if (eventname.trim() === '' || eventdate.trim() === '' || eventloc.trim() === '' || eventauthor.trim() === '' || eventdesc.trim() === '') {
alert("Bitte füllen Sie alle Felder aus");
return;
}
if (!isValidDate(eventdate)) {
alert("Datum muss folgendem Format entsprechen: dd.mm.yyyy ein");
return;
}
// Validierung und Hinzufügen zur Tabelle
$(".table tbody tr").last().after(
'' +
'' + eventname + ' ' +
'' + eventdate + ' ' +
'' + eventloc + ' ' +
'' + eventdesc + ' ' +
'' + eventauthor + ' ' +
' '
);
function isValidDate(dateString) {
var regex = /^\d{2}\.\d{2}\.\d{4}$/;
return regex.test(dateString);
}
}
// Eventlistener für den Button
$('#addData').click(addData);
$('.table').on('click', '.like-button', function () {
$(this).toggleClass('liked');
if ($(this).hasClass('liked')) {
$(this).text('Gefällt mir nichtmehr');
$(this).closest('tr').addClass('liked-event');
} else {
$(this).text('Gefällt mir');
$(this).closest('tr').removeClass('liked-event');
}
});
});在上面的代码中，我们将 eventname 添加到了每个评分组件的 id 和 name 属性中。例如，id 变成了 eventname5，name 变成了 eventnameRate。 这样，每个事件的评分组件都有了唯一的标识符，从而实现了独立的评分功能。
HTML 和 CSS 代码 (无需修改)
以下是HTML和CSS代码，这些代码无需修改，因为问题主要在于JavaScript代码中动态生成的元素的 id 和 name 属性的冲突。
Eventüberblick
Überblick
Event erstellen
Neues Event
Eventliste
All
Eventname
Eventdatum
Eventort
Eventbeschreibung
Eventautor
*{
margin: 0;
padding: 0;
}
.rate {
float: left;
height: 46px;
padding: 0 10px;
}
.rate:not(:checked) > input {
position:absolute;
top:-9999px;
}
.rate:not(:checked) > label {
float:right;
width:1em;
overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:30px;
color:#ccc;
}
.rate:not(:checked) > label:before {
content: '★ ';
}
.rate > input:checked ~ label {
color: #ffc700;
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
color: #deb217;
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
color: #c59b08;
}注意事项
- 唯一标识符的选择： 选择能够唯一标识每一行的属性作为 id 和 name 的前缀。 如果事件名称不唯一，可以考虑使用事件ID或其他唯一标识符。
- 代码维护： 在修改代码时，确保所有的 id 和 name 属性都得到了正确的更新，避免出现遗漏或错误。
- 动态生成元素的事件绑定： 如果你需要对动态生成的元素绑定事件，可以使用事件委托的方式，将事件绑定到静态父元素上。
总结
通过确保动态生成的HTML表格中每个星级评分组件的 id 和 name 属性的唯一性，可以有效地解决评分组件互相干扰的问题。 这种方法简单易行，能够快速地实现独立的评分功能。在实际开发中，可以根据具体的需求选择合适的唯一标识符，并注意代码的维护和更新。
