JQuery .val不起作用

Question

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

这是我的代码：

＆＃13;

＆＃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;

＆＃13;

＆＃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;

＆＃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;

＆＃13;

＆＃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;

＆＃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;

＆＃13;

＆＃13;