javascript перезагрузка функции

293
20 декабря 2016, 21:24

Задача сделать форму..с указанием время начала и время конца

при (повторном) выборе значения . функция init() не перезагружается =( то есть суммирует значения

Подскажите как это исправить. Заранее спасибо .

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>

Не хочет он выполняться на jsfiddle . Попробую пояснить : когда пользователь кликает на + значение увеличивается на N значение ,которое было передано в функцию init() вызванную в функции today() или $tomorrow с разными параметрами init()ведет себя не правильно

Answer 1

Ну, поехали.

Каждый раз, когда вызывается функция init, она добавляет новые обработчики события click элементов '.up-hours', '.down-hours', '.up-minutes', '.down-minutes'. Нажмите два раза кнопку "Сегодня", а потом "+" часов - заметьте, на сколько увеличивается значение в инпуте.

function init(hours_now) {
  $('.up-hours').off('click');
  $('.up-hours').click(function () {
    ...
READ ALSO
Scroll event и css parallax

Scroll event и css parallax

Добрый деньЕсть параллакс-контейнер (параллакс реализован на css, без js)

267
Организовать данные в виде вектора или списка

Организовать данные в виде вектора или списка

Есть файл, который организован в виде таблицыНадо прочитать этот файл и организовать данные, прочитанные из этого файла в виде какой-то структуры

267