CODEWITHSUNDEEP
javascriptjquery
kleax
kleax

Reputation: 3

.change function in a for loop

Is there anyway to put a .change function into a for loop instead of writing this function out 4 times because i need this same function but with #room_Children1,2,3 and 4 and.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;
            }
});

Upvotes: 0

Views: 326

Answers (3)

John Hartsock
John Hartsock

Reputation: 86872

You don't need a for loop. You have all the data needed within the Id of the element that has the change function bound. Basically extract the number from the end of the ID and utilize this numeric value within the change function itself.

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

Upvotes: 1

Andreas Wong
Andreas Wong

Reputation: 60516

Drop the whole chunk in a function:

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

Then

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

Upvotes: 1

jmar777
jmar777

Reputation: 39649

$.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;
        }
    });
});

Upvotes: 1

Related Questions