Как создать счетчик с помощью jQuery

Итак, я пытаюсь создать счетчик с помощью jQuery, но по какой-то причине я не могу заставить его работать. Я использую 3 входа. 1 ввод номера и 2 кнопки.Как создать счетчик с помощью jQuery

Мой HTML выглядит следующим образом:

<html> 

    <head> 

     <link rel="stylesheet" type="text/css" href="style.css"> 

    </head> 

    <body> 

     <div id="title"> 
      <div id="middle"> 
       <div id="inner">Books</div> 
      </div> 
     </div> 

     <input class="counter" type="number" value="0"></input> 

     <input class="red" type="submit" value="-"></input> 
     <input class="green" type="submit" value="+"></input> 

     <script type="text/javascript" src="jquery-1.11.10.min.js"></script> 
     <script type="text/javascript" src="script.js"></script> 

    </body> 

</html>

И это мой JQuery код:

$(document).ready(function(){ 

    var num = 0; 

    $(".red").click(function(){ 
     num = $(".counter").val(); 
     num = num - 1; 
     $(".counter").val(num); 
    }) 

    $(".green").click(function(){ 
     num = $(".counter").val(); 
     num = num + 1; 
     $(".counter").val(num); 
    }) 

}

Я не могу показаться, чтобы найти то, что случилось с моим кодом.

источник

2014-02-05 Rorrim

удалить эти: 'Num = $ ("счетчик"). Вал();' – Malk

Здесь я использовать +, которые форсируют двигатель неявно преобразовать это путем применения к нему математического оператора;

значения входного Преобразовать на номер

num = +$(".counter").val();

DEMO

Кроме того, Вы не хватаете закрытия ) документа готового обработчика.

Я также хотел бы предложить вам следует использовать type="button" вместо type="submit"

источник

2014-02-05 19:22:02 Satpal

Спасибо за ваш ответ! Он сразу сработал, когда я удалил обработчик DOM. «+», О котором вы упоминали, на самом деле не требуется, потому что, поскольку @JasonP упоминает, что переменная num уже имеет значение 0, она меняет и меняет эту переменную, а затем выводит ее. – Rorrim

@Rorrim. Что делать, если вы вводите 5 в поле ввода, будет ли он работать, если вы удалите 'num = + $ (". Counter "). Val();' и затем выполните приращение или декремент? Я принимаю это во внимание при предоставлении решения – Satpal

@Rorrim, Do share find/answer of my question – Satpal

num = $(".counter").val(); собирается быть строкой, поэтому "1" + "1" = "11"

Try:

num = parseInt($(".counter").val());

источник

2014-02-05 19:21:42

Спасибо за ответ.. Это будет строка? Я имею в виду, что входной счетчик имеет тип «число». Разве это ничего не меняет. – Rorrim

Типы переменных JavaScript не определяются HTML. –

О, я вижу. Большое спасибо! – Rorrim

Причина это провал происходит потому, что val() возвращается в виде строки и + делает конкатенацию, а не сложение.

Однако, поскольку у вас уже есть значение, хранящееся в переменной, вам действительно не нужно вытягивать значение из ввода каждый раз. Вот более простой вариант:

http://jsfiddle.net/bcHWa/

var num = 0; 

$(".red").click(function() { 
    $(".counter").val(--num); 
}) 

$(".green").click(function() { 
    $(".counter").val(++num); 
})

источник

2014-02-05 19:25:33

Спасибо за ответ. Это странно, я пробовал это по-своему, и это не сработало. Затем я удалил $ (document) .ready (function() {)}, и он сработал. Вы не знаете, почему это произошло? Также хорошая идея по использованию только $ (".счетчик "). val (- num), он сохраняет 2 строки кода! – Rorrim

Единственный способ добавления обработчика dom dom должен прерываться, если вы определяете' num' внутри обработчика, а затем пытаетесь получить к нему доступ за пределами обработчика или от другого обработчика или функции. –

Спасибо большое! Вот счетчик, который я сделал btw http://juniaj.com/online/Project%20Spyros/counter/index.htm – Rorrim

Как создать счетчик с помощью jQuery

ответ

Смежные вопросы