循环

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

第二个问题：使用change事件更改click事件并将其附加到：

$('[id^=check] :checkbox').on('change', function(e) {

从检查开始选择 td id ，并为每个td获取子复选框。

＆＃13;

＆＃13;

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;

＆＃13;

＆＃13;

Answer 2

使用input：复选框选择器获取所有复选框：

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