samedi 11 juin 2016

How can I simplify this series of jQuery click events?


I have the following series of click events in my jQuery code:

$('#morning .up .hour').click(function () {
  morning.hour++
  update_hour(morning);
});

$('#morning .up .min').click(function () {
  morning.min++
  update_min(morning);
});

$('#morning .up .sec').click(function () {
  morning.sec++
  update_sec(morning);
});

$('#morning .down .hour').click(function () {
  morning.hour--
  update_hour(morning);
});

// ...
// morning down min
// morning down sec
//
// evening up hour
// evening up min
// evening up sec
//
// evening down hour
// evening down min
// ...

$('#evening .down .sec').click(function () {
  evening.sec--
  update_sec(evening);
});

Each alarm has an object which contains the values for the hours, minutes and seconds, along with the selector for the values (this is used in the update functions explained below):

var morning = {
  selecthour: "#morning .time .hour",
  selectmin: "#morning .time .min",
  selectsec: "#morning .time .sec",
  hour: 7,
  min: 0,
  sec: 0
};

And finally the HTML code:

<div id="morning">
    <div class="wrapper"> <!-- Wrapper for styling -->
        <div class="up"> <!-- Up arrows -->
            <div class="hour">Up</div>
            <div class="min">Up</div>
            <div class="sec">Up</div>
        </div>
        <div class="time"> <!-- hour, min and sec fields -->
            <span class="hour">EX</span>:<span class="min">AM</span>:<span class="sec">PL</span>
        </div>
        <div class="down"> <!-- Down arrows -->
            <div class="hour">Down</div>
            <div class="min">Down</div>
            <div class="sec">Down</div>
        </div>
    </div>     
</div>

The basic structure of the page is:

  • There are several alarms, each of which has a unique ID (currently there are two: one named morning, one named evening.)
  • Each alarm has an hour, minute and second field (see div.time)
  • Each field, in each alarm, has an up and a down arrow which increases or decreases the time
  • In the selectors above, the ID is the alarm, the first class is the up or down arrow, and the second class is the field which the arrow is associated with (hour/min/sec)

When a button is clicked, the following should happen:

  • The hour, min or sec property of the alarm object (morning or evening) is incremented or decremented by 1, based on the arrow pressed
  • The update_hour, update_min, or update_sec function is called, with the alarm object as its argument (morning or evening)
  • The update function checks and corrects any invalid input, then updates the appropriate field of the appropriate alarm in the HTML.

THE PROBLEM: It takes 6 functions, each 3 lines long, for every alarm. For just the two alarms that's 36 lines of repetitive code.

THE QUESTION: Is it possible to simplify this series of jQuery .click() statements? Bonus points if it works with more than the two specified alarms. (I have an array containing all of the alarms if that helps)


Aucun commentaire:

Enregistrer un commentaire