1. 首页
  2. 问答
  3. 价值不增加按钮onclick

价值不增加按钮onclick

2017-08-10 45 views
1

我写这个函数onclick增量输入值。为什么这不起作用？控制台返回0错误，因为我不知道那是什么问题。每次点击按钮时，脚本应该为输入添加一个+1值+ 如果您可以提供一个类似且正确的递减版本，我将不胜感激。价值不增加按钮onclick

inputval = 0; 
 

 
$(".plus").on("click", function() { 
 
    inputval = $("#param8").val(); 
 
    inputval++; 
 
});
input[type="text"] { 
 
    display: block; 
 
    border: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 15px; 
 
    font-family: 'open sans', sans-serif; 
 
    padding: 10px; 
 
    width: 460px; 
 
    margin-bottom: 10px; 
 
    border: 1px solid #c0c0c0; 
 
} 
 

 
.count-field { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    height: 39px; 
 
    width: 40px; 
 
    text-align: center; 
 
    border: 0; 
 
    color: #fff; 
 
    background: #222; 
 
} 
 

 
.count-field:hover { 
 
    cursor: pointer; 
 
    transition-duration: 0.5s; 
 
} 
 

 
.count-field.plus { 
 
    right: 40px; 
 
    border-right: 1px solid rgba(255, 255, 255, 0.5); 
 
} 
 

 
.count-field.plus:hover { 
 
    background: green; 
 
} 
 

 
.count-field.minus:hover { 
 
    background: #cd3d3d; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="position: relative; width: 500px;"> 
 
    <input type="text" placeholder="Text field amount" value="" id="param8" name="param8" /> 
 
    <button type="button" class="count-field plus">+</button> 
 
    <button type="button" class="count-field minus">-</button> 
 
</div>

来源

2017-08-10 sc4rface

回答

2

使用此代码：

您需要修改你的JavaScript代码在这里看到：

inputval = 0; \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
$(".plus").on("click", function() { 
 
    inputval = $("#param8").val(); 
 
    inputval++; \t 
 
    $("#param8").val(inputval); \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
}); 
 

 
$(".minus").on("click", function() { 
 
    inputval = $("#param8").val(); 
 
    inputval--; 
 
    //set min value to 0 
 
    if(inputval <= 0){ 
 
     inputval = 0; 
 
    } 
 
    $("#param8").val(inputval); \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
});
input[type="text"] { 
 
display: block; 
 
border: 0; 
 
margin: 0; 
 
padding: 0; 
 
font-size: 15px; 
 
font-family: 'open sans',sans-serif; 
 
padding: 10px; 
 
width: 460px; 
 
margin-bottom: 10px; 
 
border: 1px solid #c0c0c0; 
 
} 
 

 
.count-field { 
 
position: absolute; 
 
right: 0; 
 
top: 0; 
 
height: 39px; 
 
width: 40px; 
 
text-align: center; 
 
border: 0; 
 
color: #fff; 
 
background: #222; 
 
} 
 

 
.count-field:hover { 
 
    cursor: pointer; 
 
    transition-duration: 0.5s; 
 
} 
 

 
.count-field.plus { 
 
right: 40px; 
 
border-right: 1px solid rgba(255,255,255,0.5); 
 
} 
 

 
.count-field.plus:hover { 
 
background: green; 
 
} 
 

 
.count-field.minus:hover { 
 
background: #cd3d3d; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="position: relative; width: 500px;"> 
 
<input type="text" placeholder="Text field amount" value="" id="param8" name="param8" /> 
 
<button type="button" class="count-field plus">+</button> 
 
<button type="button" class="count-field minus">-</button> 
 
</div>

来源

2017-08-10 10:55:53

0

只需设定值后，增量

inputval = 0;               
$(".plus").on("click", function() { 
inputval = $("#param8").val();         
inputval++; 
$("#param8").val(inputval);                 
});

来源

2017-08-10 10:55:22

0

这将帮助你......

inputval = 0; \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
$(".plus").on("click", function() { 
 
inputval++; 
 
$("#param8").val(inputval); \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t }); 
 
$(".minus").on("click", function() { 
 
inputval--; \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
$("#param8").val(inputval); \t \t \t \t \t \t \t \t \t 
 
});
input[type="text"] { 
 
display: block; 
 
border: 0; 
 
margin: 0; 
 
padding: 0; 
 
font-size: 15px; 
 
font-family: 'open sans',sans-serif; 
 
padding: 10px; 
 
width: 460px; 
 
margin-bottom: 10px; 
 
border: 1px solid #c0c0c0; 
 
} 
 

 
.count-field { 
 
position: absolute; 
 
right: 0; 
 
top: 0; 
 
height: 39px; 
 
width: 40px; 
 
text-align: center; 
 
border: 0; 
 
color: #fff; 
 
background: #222; 
 
} 
 

 
.count-field:hover { 
 
cursor: pointer; 
 
transition-duration: 0.5s; 
 
} 
 

 
.count-field.plus { 
 
right: 40px; 
 
border-right: 1px solid rgba(255,255,255,0.5); 
 
} 
 

 
.count-field.plus:hover { 
 
background: green; 
 
} 
 

 
.count-field.minus:hover { 
 
background: #cd3d3d; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="position: relative; width: 500px;"> 
 
<input type="text" placeholder="Text field amount" value="" id="param8" name="param8" /> 
 
<button type="button" class="count-field plus">+</button> 
 
<button type="button" class="count-field minus">-</button> 
 
</div>

编码快乐......

来源

2017-08-10 10:58:22

0

简单的就是用++inputval和--inputval：

inputval = 0; 
 
$(".plus").on("click", function() { 
 
    $("#param8").val(++inputval); 
 
}); 
 
$(".minus").on("click", function() { 
 
    $("#param8").val(--inputval); 
 
});
input[type="text"] { 
 
    display: block; 
 
    border: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 15px; 
 
    font-family: 'open sans', sans-serif; 
 
    padding: 10px; 
 
    width: 460px; 
 
    margin-bottom: 10px; 
 
    border: 1px solid #c0c0c0; 
 
} 
 

 
.count-field { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    height: 39px; 
 
    width: 40px; 
 
    text-align: center; 
 
    border: 0; 
 
    color: #fff; 
 
    background: #222; 
 
} 
 

 
.count-field:hover { 
 
    cursor: pointer; 
 
    transition-duration: 0.5s; 
 
} 
 

 
.count-field.plus { 
 
    right: 40px; 
 
    border-right: 1px solid rgba(255, 255, 255, 0.5); 
 
} 
 

 
.count-field.plus:hover { 
 
    background: green; 
 
} 
 

 
.count-field.minus:hover { 
 
    background: #cd3d3d; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="position: relative; width: 500px;"> 
 
    <input type="text" placeholder="Text field amount" value="" id="param8" name="param8" /> 
 
    <button type="button" class="count-field plus">+</button> 
 
    <button type="button" class="count-field minus">-</button> 
 
</div>

来源

2017-08-10 10:58:31

0 
inputval = 0;               
$(".plus").on("click", function() { 
inputval++; 
$("#param8").val(inputval);                          
});

试试这个..

来源

2017-08-10 11:00:24

相关问题

 相关问题