Question

我正在尝试数量系统而我的代码是：

    <div class="sp-quantity">
        <div class="sp-minus fff"> <a class="ddd" href="#">-</a></div>
        <div class="sp-input">
            <input type="text" class="quntity-input" value="1">
        </div>
        <div class="sp-plus fff"> <a class="ddd-plus" href="#">+</a></div>
    </div>
    <script>
    $('.ddd-plus').click(function(){
        var $old = $('.quntity-input').val();
        var $plus =($old +1);
        // var $minus = $old - 1;
        $('input').val($plus);
        console.log($plus,$old);
    });
    </script>
<style>.sp-quantity {
    width:124px;
    height:42px;
    font-family:"ProximaNova Bold", Helvetica, Arial;
}
.sp-minus {
    width:40px;
    height:40px;
    border:1px solid #e1e1e1;
    float:left;
    text-align:center;
}
.sp-input {
    width:40px;
    height:40px;
    border:1px solid #e1e1e1;
    border-left:0px solid black;
    float:left;
}
.sp-plus {
    width:40px;
    height:40px;
    border:1px solid #e1e1e1;
    border-left:0px solid #e1e1e1;
    float:left;
    text-align:center;
}
.sp-input input {
    width:30px;
    height:34px;
    text-align:center;
    font-family:"ProximaNova Bold", Helvetica, Arial;
    border: none;
}
.sp-input input:focus {
    border:1px solid #e1e1e1;
    border: none;
}
.sp-minus a, .sp-plus a {
    display: block;
    width: 100%;
    height: 100%;
    padding-top: 5px;
}
</style>

（顺便说一下，只有当我把jquery放到控制台时，这段代码才有效，否则它不起作用。

因此，当我点击加号时，它应该为输入值增加1（例如：如果输入值1，它应该是2，但它会使它成为11）

我该如何解决？感谢

Answer 1

您可以使用Unary plus (+) operator。

一元加号运算符在其操作数之前，并计算其操作数，但尝试将其转换为数字（如果尚未）。

一元加号是将某些内容转换为数字的最快和首选方式，因为它不对该数字执行任何其他操作。

代码：

   <dependencies>  

        <dependency>
        <groupId>jstl</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
        </dependency>
          <dependency> 
          <groupId>junit</groupId>  
           <artifactId>junit</artifactId>  
            <version>3.8.1</version>  
             <scope>test</scope>  
             </dependency>  
               <dependency>  
                 <groupId>javax.servlet</groupId>  
                <artifactId>servlet-api</artifactId>  
                <version>3.0-alpha-1</version>  
               </dependency>  
              <dependency>  
            <groupId>org.springframework</groupId>  
          <artifactId>spring-core</artifactId>  
            <version>3.1.2.RELEASE</version>  
           </dependency>  
                  <dependency>  
                <groupId>org.springframework</groupId>  
           <artifactId>spring-context</artifactId>  
         <version>3.1.2.RELEASE</version>  
                   </dependency>  
                 <dependency>  
           <groupId>org.springframework</groupId>  
       <artifactId>spring-beans</artifactId>  
        <version>3.1.2.RELEASE</version>  
      </dependency>  
         <dependency>  
        <groupId>org.springframework</groupId>  
           <artifactId>spring-webmvc</artifactId>  
         <version>3.1.2.RELEASE</version>  
                   </dependency>  
                 <dependency>
         <groupId>log4j</groupId>
         <artifactId>log4j</artifactId>
             <version>1.2.17</version>
             </dependency>
              </dependencies>

var $input = $('input'),
    val = +$input.val();

$('.ddd-plus').click(function() {
  $input.val(++val);
});

$('.ddd-minus').click(function() {
  val && $input.val(--val);
});

.sp-quantity {width:124px;height:42px;font-family:"ProximaNova Bold", Helvetica, Arial;}
.sp-minus {width:40px;height:40px;border:1px solid #e1e1e1;float:left;text-align:center;}
.sp-input {width:40px;height:40px;border:1px solid #e1e1e1;border-left:0px solid black;float:left;}
.sp-plus {width:40px;height:40px;border:1px solid #e1e1e1;border-left:0px solid #e1e1e1;float:left;text-align:center;}
.sp-input input {width:30px;height:34px;text-align:center;font-family:"ProximaNova Bold", Helvetica, Arial;border: none;}
.sp-input input:focus {border:1px solid #e1e1e1;border: none;}
.sp-minus a, .sp-plus a {display: block;width: 100%;height: 100%;padding-top: 5px;}

Answer 2

$('.quntity-input').val()返回字符串，您需要将输入值转换为数字

var $old = Number($('.quntity-input').val());

所以你的代码应该是，

$('.ddd-plus').click(function(){
    var $old = Number($('.quntity-input').val());
    var $plus =($old +1);
    // var $minus = $old - 1;
    $('input').val($plus);
    console.log($plus,$old);
});

请务必检查isNaN，因为Number或parseInt会因无效号码而返回NaN

Answer 3

或者使用parseInt：

var $old = parseInt($('.quntity-input').val(), 10);

Answer 4

因为你正在使用jquery的val（）函数，通常val（）返回包含值的数组但是如果找不到任何东西则返回null;

源：

http://api.jquery.com/val/

您可以通过以下链接查看您的计划：

＆＃13;

$('.ddd-plus').click(function() {
    var old = $('.quntity-input').val();
    var plus =(parseInt(old) +1);
    $('.quntity-input').val(plus);
});
$('.ddd-minus').click(function() {
    var old = $('.quntity-input').val();
    var plus =(parseInt(old) -1);
    $('.quntity-input').val(plus);
});

＆＃13;

.sp-quantity {
  width: 124px;
  height: 42px;
  font-family: "ProximaNova Bold", Helvetica, Arial;
}

.sp-minus {
  width: 40px;
  height: 40px;
  border: 1px solid #e1e1e1;
  float: left;
  text-align: center;
}

.sp-input {
  width: 40px;
  height: 40px;
  border: 1px solid #e1e1e1;
  border-left: 0px solid black;
  float: left;
}

.sp-plus {
  width: 40px;
  height: 40px;
  border: 1px solid #e1e1e1;
  border-left: 0px solid #e1e1e1;
  float: left;
  text-align: center;
}
.sp-minus {
  width: 40px;
  height: 40px;
  border: 1px solid #e1e1e1;
  border-left: 0px solid #e1e1e1;
  float: left;
  text-align: center;
}

.sp-input input {
  width: 30px;
  height: 34px;
  text-align: center;
  font-family: "ProximaNova Bold", Helvetica, Arial;
  border: none;
}

.sp-input input:focus {
  border: 1px solid #e1e1e1;
  border: none;
}

.sp-minus a,
.sp-plus a {
  display: block;
  width: 100%;
  height: 100%;
  padding-top: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sp-quantity">
  <div class="sp-minus fff"> <a class="ddd-minus" href="#">-</a></div>
  <div class="sp-input">
    <input type="text" class="quntity-input" value="1">
  </div>
  <div class="sp-plus fff"> <a class="ddd-plus" href="#">+</a></div>
</div>

＆＃13;

jQuery Math Don不工作

4 个答案: