javascript - .change 循环中的函数

Question

无论如何将一个.change函数放入for循环而不是将这个函数写出4次，因为我需要这个相同的函数但是使用#room_Children1,2,3 and 4and.room#1,2,3 and 4

$("#room_Children1").change(function () {
            switch ($("#room_Children1").val()) {
                case "1":
                    $(".room#1").children().next().next().first().show();
                    $(".room#1").children().next().next().next().first().hide();
                    $(".room#1").children().next().last().hide();
                    break;
                case "2":
                    $(".room#1").children().next().next().first().show();
                    $(".room#1").children().next().next().next().first().show();
                    $(".room#1").children().next().last().hide();
                    break;
                case "3":
                    $(".room#1").children().next().next().first().show();
                    $(".room#1").children().next().next().next().first().show();
                    $(".room#1").children().next().last().show();
                    break;
                case "0":
                    $(".room#1").children().next().next().hide();
                    break;
                default:
                    alert("You cheated");
                    break;
            }
});

Answer 1

$.each([1,2,3,4], function(i, num) {
    var $roomChildren = $("#room_Children" + num);
    $roomChildren.change(function () {
        var $room = $(".room#" + num);
        switch ($roomChildren.val()) {
            case "1":
                $room.children().next().next().first().show();
                $room.children().next().next().next().first().hide();
                $room.children().next().last().hide();
                break;
            case "2":
                $room.children().next().next().first().show();
                $room.children().next().next().next().first().show();
                $room.children().next().last().hide();
                break;
            case "3":
                $room.children().next().next().first().show();
                $room.children().next().next().next().first().show();
                $room.children().next().last().show();
                break;
            case "0":
                $room.children().next().next().hide();
                break;
            default:
                alert("You cheated");
                break;
        }
    });
});

Answer 2

您不需要 for 循环。您在绑定了更改功能的元素的 Id 中拥有所需的所有数据。基本上从 ID 末尾提取数字，并在更改函数本身中使用此数值。

$("#room_Children1, #room_Children2, #room_Children3, #room_Children4").change(function () {
  var $this = $(this);
  var roomNumber = $this.attr("id")[$this.attr("id").length -1];
  switch ($this.val()) {
    case "1":
      $(".room#" + roomNumber).children().next().next().first().show();
      $(".room#" + roomNumber).children().next().next().next().first().hide();
      $(".room#" + roomNumber).children().next().last().hide();
      break;
    case "2":
      $(".room#" + roomNumber).children().next().next().first().show();
      $(".room#" + roomNumber).children().next().next().next().first().show();
      $(".room#" + roomNumber).children().next().last().hide();
      break;
    case "3":
      $(".room#" + roomNumber).children().next().next().first().show();
      $(".room#" + roomNumber).children().next().next().next().first().show();
      $(".room#1").children().next().last().show();
      break;
    case "0":
      $(".room#" + roomNumber).children().next().next().hide();
      break;
    default:
      alert("You cheated");
      break;
  }
});

Answer 3

将整个块放入函数中：

function foo(id) { // choose a better function name, can't think of one at the moment :s
        var classId = '.room#' + id;
        switch ($('#room_Children' + id).val()) {
            case "1":
                $(classId).children().next().next().first().show();
                $(classId).children().next().next().next().first().hide();
                $(classId).children().next().last().hide();
                break;
            case "2":
                $(classId).children().next().next().first().show();
                $(classId).children().next().next().next().first().show();
                $(classId).children().next().last().hide();
                break;
            case "3":
                $(classId).children().next().next().first().show();
                $(classId).children().next().next().next().first().show();
                $(classId).children().next().last().show();
                break;
            case "0":
                $(classId).children().next().next().hide();
                break;
            default:
                alert("You cheated");
                break;
        }
}

然后

$("#room_Children1, #room_Children2, #room_Children3, #room_Children4")
   .change(function() {
      var id = $(this).attr('id').replace('room_Children', '');
      foo(id);
   });