解
https://github.com/Campos696/Attendance/commit/28177ff5cf285e9616faddae74fa6f0288a8667a
我有这个javascript文件:
https://github.com/Campos696/Attendance/blob/master/js/app.js
我正试图让bodyView创建的复选框有点击监听器,但是现在我只能为一个复选框创建一个监听器,有什么方法可以改善这个吗?
无论我选中还是取消选中它都会做同样的事情(减少daysMissed)。
以下是代码的相关部分:
var bodyView = {
init: function() {
this.render();
},
render: function() {
var student, i, x;
var schoolDays = octopus.getSchoolDays();
var students = octopus.getStudents();
for(i = 0;i < students.length; i++) {
octopus.setCurrentStudent(students[i]);
var daysMissed = octopus.getDaysMissed();
$('#students').append('<tr class="'+i+'"><td class="name-col">' + students[i].name + '</td></tr>');
for(x = 1;x < schoolDays; x++) {
$('.'+i).append('<td id="check'+i+'" class="attend-col"><input type="checkbox"></td>');
};
$('.'+i).append('<td class="missed-col">'+ daysMissed + '</td>');
};
$(function(){
$('#check0').click(function() {
octopus.setCurrentStudent(students[0]);
if($(this).is(':checked')){
octopus.incrementDaysMissed();
} else if(!$(this).is(':checked')){
octopus.decreaseDaysMissed();
}
})
})
}
}
功能编辑
$(function(){
$('[id^=check] :checkbox').on('change', function(e) {
var daysMissed = $(this).closest('tr').find('td:last');
if (this.checked) {
octopus.decreaseDaysMissed();
daysMissed.html(octopus.getDaysMissed());
} else {
octopus.incrementDaysMissed();
daysMissed.html(octopus.getDaysMissed());
}
})
})
答案 0 :(得分:1)
ID必须是唯一的。这意味着您需要更改以下行:
$('.'+i).append('<td id="check'+i+'" class="attend-col"><input type="checkbox"></td>');
使用:
$('.'+i).append('<td id="check'+ i + x +'" class="attend-col"><input type="checkbox"></td>');
^^^^^^^^
这样每个td都有一个id:check01 ..... check46 ...
第二个问题:使用change事件更改click事件并将其附加到:
$('[id^=check] :checkbox').on('change', function(e) {
从检查开始选择 td id ,并为每个td获取子复选框。
var model = {
currentStudent: null,
schoolDays: 12,
students: [
{
name: "Slappy the Frog",
daysMissed: 12
},
{
name: "Lilly the Lizard",
daysMissed: 12
},
{
name: "Paulrus the Walrus",
daysMissed: 12
},
{
name: "Gregory the Goat",
daysMissed: 12
},
{
name: "Adam the Anaconda",
daysMissed: 12
}
]
};
// Octopus
var octopus = {
init: function () {
model.currentStudent = model.students[0];
headerView.init();
bodyView.init();
},
getStudents: function () {
return model.students;
},
setCurrentStudent: function (student) {
model.currentStudent = student;
},
getSchoolDays: function () {
return model.schoolDays + 1;
},
getDaysMissed: function () {
return model.currentStudent.daysMissed;
},
incrementDaysMissed: function () {
model.currentStudent.daysMissed++;
},
decreaseDaysMissed: function () {
model.currentStudent.daysMissed--;
}
};
// View
var headerView = {
init: function () {
this.render();
},
render: function () {
var i;
var schoolDays = octopus.getSchoolDays();
$('#header').append('<th class="name-col">Student Name</th>');
for (i = 1; i < schoolDays; i++) {
$('#header').append('<th>' + i + '</th>');
}
;
$('#header').append('<th class="missed-col">Days Missed</th>');
}
};
var bodyView = {
init: function () {
this.render();
},
render: function () {
var student, i, x;
var schoolDays = octopus.getSchoolDays();
var students = octopus.getStudents();
$('#students').empty();
for (i = 0; i < students.length; i++) {
octopus.setCurrentStudent(students[i]);
var daysMissed = octopus.getDaysMissed();
$('#students').append('<tr class="' + i + '"><td class="name-col">' + students[i].name + '</td></tr>');
for (x = 1; x < schoolDays; x++) {
$('.' + i).append('<td id="check' + i + x + '" class="attend-col"><input type="checkbox"></td>');
}
$('.' + i).append('<td class="missed-col">' + daysMissed + '</td>');
}
$(function(){
$('[id^=check] :checkbox').on('change', function(e) {
var colId = $(this).closest('td').index();
var rowId = $(this).closest('tr').index();
var studentName =
$(this).closest('tr').find('td:first').text();
console.log('Student: <' + studentName +
'> on day: ' + colId + ' changed to: ' +
this.checked + ' Col: ' + colId + ' Row: ' + rowId);
})
})
}
}
$(function () {
octopus.init();
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Campos696/Attendance/master/css/style.css">
<h1>Udacity Attendance</h1>
<table>
<thead>
<tr id="header"></tr>
</thead>
<tbody id="students"></tbody>
</table>
&#13;
答案 1 :(得分:0)
使用input:复选框选择器获取所有复选框:
$(function(){
$("input:checkbox").click(function() {
octopus.setCurrentStudent(students[0]);
if($(this).prop("checked",true)){
octopus.incrementDaysMissed();
} else {
octopus.decreaseDaysMissed();
}
});
});