jQuery的復選框監聽器循環

Question

解

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());
            }
        })
    })

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

第二個問題：使用更改事件更改點擊事件，並將其附加到：

$('[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(); }); 

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

Answer 2

使用input：checkbox選擇器來獲取所有復選框：

$(function(){
  $("input:checkbox").click(function() {
    octopus.setCurrentStudent(students[0]);
    if($(this).prop("checked",true)){
      octopus.incrementDaysMissed();
    } else {
      octopus.decreaseDaysMissed();
    }
  });
});