Question

I’m just wondering if there is a best case to write this code:

  $('#set_duration_30').click(function(event) {
    $('#duration').val(30);
  });

  $('#set_duration_60').click(function(event) {
    $('#duration').val(60);
  });

  $('#set_duration_90').click(function(event) {
    $('#duration').val(90);
  });

  $('#set_duration_120').click(function(event) {
    $('#duration').val(120);
  });

Answer 1

Give your elements a css-class, for example durationsetter. Also give them an attribute that contains their value, for example data-duration.

i.e.

<input type="button" class="durationsetter" data-duration="30" />

Then your jQuery will look like this:

$('.durationsetter').click(function(e) {
    $('#duration').val($(this).attr('data-duration'));
});