javascript - .forループの関数を変更します

Question

.changeこの同じ関数が必要ですが、とを使用してこの関数を4回書き出す代わりに#room_Children1,2,3 and 4、関数をforループに入れる方法はありますか？.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);
   });