Question

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

使用此代码：

您需要修改JavaScript代码，请参阅此处：

inputval = 0;															
$(".plus").on("click", function() {
   inputval = $("#param8").val();
   inputval++;	
   $("#param8").val(inputval);																						 
});

$(".minus").on("click", function() {
   inputval = $("#param8").val();
   inputval--;
   //set min value to 0
   if(inputval <= 0){
      inputval = 0;
   }
   $("#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>

Answer 2

只需在增量后设置值

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

Answer 3

这会对你有帮助......

＆＃13;

    var NP=new Product(); 
    Context.Porduct.Add(NP);
    Context.saveChanges();
    NP.Types.Add(new ProductTypes
              {
                  Quantity=8
              });
   Context.saveChanges();

＆＃13;

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

＆＃13;

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;
}

＆＃13;

快乐编码......

Answer 4

最简单的方法是使用++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>

Answer 5

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

试试这个..

按钮onclick

5 个答案: