主要问题

Question

我的jquery出了问题。在将此标记为重复问题之前，我已经查看了一系列类似的解决方案，但没有找到答案。我需要做的很简单。我在两个按钮之间输入了类型编号，加上（+）和减号（ - ）。基本上，如果单击加号，则输入的值将加1，如果单击减号，则减去1。

这是我的代码：

＆＃13;

$(function() {
  $("#plus").click(function() {
    var pages_val = $('#pages').val();

    if (pages_val < 0) {
      pages_val = 0;
    } else {
      pages_val += 1;
    }

    $('#pages').val(pages_val);
  });

  $("#minus").click(function() {
    var pages_val = $('#pages').val();

    if (pages_val <= 0) {
      pages_val = 0;
    } else {
      pages_val -= 1;
    }

    $('#pages').val(pages_val);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button id="minus">-</button>
  <input id="pages" name="pages" type="number" value="0">
  <button id="plus">+</button>
</div>

＆＃13;

html全部用形式标签btw括起来。所以我的问题是当我点击任何按钮时，值闪烁（闪烁）一秒钟然后恢复为空输入。我检查了代码检查器，值没有变化。当用户点击任何按钮时，我需要保留该值。请帮忙。控制台显示没有日志。

编辑：没有解决方案，谁给我的帖子一个-1。它只持续了6秒

Answer 1

.val()将以字符串形式返回值。您正在进行数学运算，因此您需要将值转换为数字。试试parseFloat()

var pages_val = parseFloat($('#pages').val());

Answer 2

主要问题

＆＃34; ...任何按钮值闪烁（闪烁）一秒钟然后恢复为空输入。＆＃34;

OP提供的代码的表单控件包含在<div>而不是<form>标记中。以下演示提供了更准确的布局：

＆＃34; html全部用表格标签括起来＆＃34;

问题

A <button> tag behaves as a submit button when it is nested within a <form> tag。因此，无论何时单击按钮，它都会被解释为"submit"事件，如果配置为<form>标记数据，则会将<form>标记数据发送到服务器，如果未配置，则会尝试而不管。每次提交，失败或成功都会导致重置<button>。

解决方案

为了防止重置，请将其添加到每个type="button"代码中

<input>

可能的问题

由于OP代码有些容易出错并且有点不准确，可能会有一些误解。在初始检查OP代码时，加号 + 按钮是连接值而不是递增数字。

加按钮单击3次

结果： 0111

预期： 3

注意：如果在点击 + 按钮 后单击减去 - 按钮而不刷新代码 ，它将按预期正常运行，即将值减少为实数。 但是，如果value的值为0时点击，则不会执行任何操作 。

Explination

从表单控件派生的任何<input>（例如<select>，0111等）都是字符串而不是实数。 < / strong>因此，当点击加号按钮时，您会看到：

"0" + "1" + "1" + "1"

这是一个来自4个字符串的字符串值：

value +=1

解决方案

必须将字符串值转换为实数值。此问题的其他答案已经提供了许多解决方案，因此我将在下面的演示中提出已经实施的内容：

而不是使用： value -=1和value++

使用此输入/递减运算符： value--和+=1

在许多情况下，(this is a string) `value` (so concat) `+` (this string to it) `"=1"`可能被误解为：

value++

而这个运算符：(this is a string) `value` (***But*** convert it to a number) `++` (and add it to the default value of number 1)没有歧义，因为它自动输入到实数：

"=1"

字符串值：=1通常会逐字地连接到<input type='number'>，但由于OP代码使用0111，因此只有数字（以字符串形式）删除非数字类型时保留。因此：0=1=1=1而不是<input type='number' value='0'>
的$(function() { $("#plus").click(function() { var pages_val = $('#pages').val(); if (pages_val < 0) { pages_val = 0; } else { pages_val++; } $('#pages').val(pages_val); }); $("#minus").click(function() { var pages_val = $('#pages').val(); if (pages_val <= 0) { pages_val = 0; } else { pages_val--; } $('#pages').val(pages_val); }); });值
Details on JavaScript Data Types ，特别是 ++ 和 --

演示

＆＃13;
＆＃13;
<form> <button id="minus" type='button'>-</button> <input id="pages" name="pages" type="number" value="0"> <button id="plus" type='button'>+</button> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
＆＃13;
User
＆＃13;
＆＃13;
＆＃13;

Answer 3

你的+/-错误使用＆＃34; ++＆＃34;和＆＃34; - ＆＃34;

＆＃13;

$(function(){
    $("#plus").click(function(){
        var pages_val = $('#pages').val();

        if (pages_val < 0){
            pages_val = 0;
        }
        else {
            pages_val++;
        }

        $('#pages').val(pages_val);
    });

    $("#minus").click(function(){
        var pages_val = $('#pages').val();

        if (pages_val <= 0){
            pages_val = 0;
        }
        else {
            pages_val--;
        }

        $('#pages').val(pages_val);
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <button id="minus">-</button>
    <input  id="pages" name="pages" type="number" value="0">
    <button id="plus">+</button>
</div>

＆＃13;

Answer 4

您正在添加一个字符串，该字符串将连接而不是执行添加。

$(function() {
  $("#plus").click(function() {
    var pages_val = Number($('#pages').val());

    if (pages_val < 0) {
      pages_val = 0;
    } else {
      pages_val += 1;
    }

    $('#pages').val(pages_val);
  });

  $("#minus").click(function() {
    var pages_val = $('#pages').val();

    if (pages_val <= 0) {
      pages_val = 0;
    } else {
      pages_val -= 1;
    }

    $('#pages').val(pages_val);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <button id="minus">-</button>
  <input id="pages" name="pages" type="number" value="0">
  <button id="plus">+</button>
</div>

+运算符在与字符串一起使用时具有多个函数，它将连接它们（将它们加在一起）。当您将它与数字一起使用时，它会添加它们。在您的应用程序中，$('#pages').val()是一个字符串。因此，+运算符对其执行字符串连接，从而产生类似11,111,1111等的值。

Answer 5

如其他答案中所述，您必须使用parseInt()，因为val()会为您提供一个字符串并且关于按钮不起作用因为默认类型的按钮是提交的，所以你需要添加按钮类型

<button type="button" id="minus">-</button>

Answer 6

已经回答了但是我正在玩的是它（它结合了你的.click功能） https://jsfiddle.net/Hastig/7L01eu2y/

＆＃13;

$('.changerer').click(function() {
  var pages_val = $('#pages').val();
  if ($(this).hasClass('minus')) {
    if (pages_val <= 0) {
      pages_val = 0;
    } else {
      pages_val--;
    }
  } else {
    pages_val++;
  }
  $('#pages').val(pages_val);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button class="changerer minus" type="button">-</button>
  <input id="pages" name="pages" type="number" value="0" min="0">
  <button class="changerer plus" type="button">+</button>
</div>

＆＃13;

JQuery .val不起作用

6 个答案:

主要问题

问题

解决方案

可能的问题

加按钮单击3次

Explination

解决方案

演示