The task is to make a form .. indicating the start time and end time

by (re) selecting a value. The init () function does not reboot = (i.e., sum the values

Tell me how to fix it. Thank you in advance .

function init(hours_now) { $('.up-hours').click(function () { var $input = $(this).parent().find('input'); var count = parseInt($input.val()) + 1; count = count >= 24 ? hours_now : count; $input.val(count); $input.change(); return false; }); $('.down-hours').click(function () { var $hours = $(this).parent().find('.hours'); var count = parseInt($hours.val()) - 1; count = count < hours_now ? hours_now : count; $hours.val(count); $hours.change(); return false; }); $('.up-minutes').click(function () { var $input = $(this).parent().find('input'); var count = parseInt($input.val()) + 15; count = count >= 60 ? 0 : count; $input.val(count); $input.change(); return false; }); $('.down-minutes').click(function () { var $input = $(this).parent().find('input'); var count = parseInt($input.val()) - 15; count = count < 0 ? 0 : count; $input.val(count); $input.change(); return false; }); } function today() { var now = new Date(); var hours_now = now.getHours(); var minutes_now = now.getMinutes(); var $start_hours = $('.up-hours').parent().find('input'); $start_hours.val(hours_now +1); init(hours_now); } function tomorrow() { var tomorrow = new Date(); tomorrow.setDate(tomorrow.getDate() + 1); init(9); } function later() { init(1); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="form-group"> <div class="col-sm-4"> <label for="start" class="control-label">Начало:</label> <div class="input-group"> <button type="button" class="btn btn-primary" onclick="today()" style="width: 100px;">Cегодня</button> </div> <div class="input-group"> <button type="button" class="btn btn-primary " onclick="tomorrow()" style="width: 100px;">Завтра</button> </div> <div class="input-form" > <input type="button" id="start" class="btn btn-primary" onclick="later()" style="width: 100px;" > </div> </div><!--col-sm-4--> <div class="form-group" > <div class="col-sm-4"> <div class="clockdiv" > <div> <div class="up-hours">+</div> <input class="hours" value="1" readonly/> <div class="down-hours">-</div> <div class="smalltext">Часов</div> </div> <div> <div class="up-minutes">+</div> <input class="minutes" value='0' readonly/> <div class="down-minutes">-</div> <div class="smalltext">Минут</div> </div> </div> </div><!--col-sm-4--> </div> <div class="form-group"> <div class="col-sm-4"> <div class="clockdiv" > <div> <div class="up-hours">+</div> <input class="hours" value="1" readonly/> <div class="down-hours">-</div> <div class="smalltext">Часов</div> </div> <div> <div class="up-minutes">+</div> <input class="minutes" value='0' readonly/> <div class="down-minutes">-</div> <div class="smalltext">Минут</div> </div> </div> </div><!--col-sm-4--> </div> 

He does not want to be executed on jsfiddle. I will try to explain: when a user clicks on + the value is increased by N, the value that was passed to the init () function called in the today () function or $ tomorrow with different parameters init () does not behave correctly

  • ssylochku would jsfiddle - teran
  • Nothing is clear, too lazy to read, and the problem is most likely the need to unsubscribe from the events. - Qwertiy

1 answer 1

Let's go.

Each time the init function is called, it adds new click event handlers for the '.up-hours' , '.down-hours' , '.up-minutes' , '.down-minutes' . Double-click the "Today" button, and then the "+" hours - note how much the value in the input increases.

 function init(hours_now) { $('.up-hours').off('click'); $('.up-hours').click(function () { ... 
  • Thanks helped! - Konstantin Maslov