jQuery的複選框，偵聽環

Question

SOLUTION

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

標識必須是唯一的。這意味着你需要更改以下行：

$('.'+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

使用輸入：複選框選擇讓所有的複選框：

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