JQuery onclick 函数 - 防止页面重新加载并添加将其用作被调用函数中的变量的能力

Question

我在创建自定义输入[type=number]时遇到了一些问题。

从顶部开始，我操作了一个输入[type=number] 以具有自定义增量按钮。

单击这些按钮时，我希望计算出输入的当前值，并在不刷新页面的情况下对该值加一或减一。

据我所知，点击按钮不应刷新页面，但我的代码并非如此。

我在使用 'this' 作为使脚本可重用的变量时也遇到了问题。

有人可以帮助我 link 我的脚本按钮，停止重新加载问题，并根据用户参与实际增加和减少输入吗？

function InputStepUp() {
 var input = this.parentNode.querySelector('input[type=number]').val();
 console.log(input);
 var inputStepUp = input + 1;
 console.log(inputStepUp);
 input.val(inputStepUp);
 console.log(input);
}
function InputStepDown() {
 var input = this.parentNode.querySelector('input[type=number]').val();
 console.log(input);
 var inputStepDown = input - 1;
 console.log(inputStepDown);
 input.val(inputStepDown);
 console.log(input);
}

input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
border: 1px solid #585CD3;
display: inline-flex;
}
.number-input button {
outline:none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
width: 20px;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before,
.number-input button:after {
display: inline-block;
position: absolute;
content: '';
width: 10px;
height: 2px;
background-color: #585CD3;
transform: translate(-50%, -50%);
}
.number-input button.plus:after {
transform: translate(-50%, -50%) rotate(90deg);
}
.number-input input[type=number] {
text-align: center;
}

<div class="number-input">
 <button onclick="InputStepDown()"></button>
 <input class="cart-product-price-multiplier" type="number" name="updates[]" id="updates_{{ item.key }}" value="5" min="0">
 <button onclick="InputStepUp()" class="plus"></button>
</div>

这是我的代码的精简版本，希望如果我们能解决这个问题，我可以修复更复杂的版本。

我已经筋疲力尽了，非常感谢人们在这个人的函数中使用 'this' 变量给出的任何建议

Answer 1

在您的特定情况下，this 是上下文，从您的函数被调用的地方，它具有全局范围 - window。你标记了你的问题 jQuery 所以如果你可以使用它，事情就会变得容易得多。我尝试在我的代码中添加注释。

我想向您推荐一个good article关于这个关键字及其理解。

// I've added common class 'btn' to both buttons and I'm handling their clicks
$('.btn').on('click', function() {
  const $input = $('.cart-product-price-multiplier'); //your current input
  const currentVal = Number($input.val()); // current input's value cated to number
  
  // we gonna identify which btn was clicked using class minus/plus
  // or you can set value to each btn and handle it instead
  const newVal = $(this).hasClass('minus') ? currentVal - 1 : currentVal + 1;
  
  $input.val(newVal); //finally we are setting new value to your input
});

input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.number-input {
  border: 1px solid #585CD3;
  display: inline-flex;
}

.number-input button {
  outline: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  cursor: pointer;
  margin: 0;
  position: relative;
}

.number-input button:before,
.number-input button:after {
  display: inline-block;
  position: absolute;
  content: '';
  width: 10px;
  height: 2px;
  background-color: #585CD3;
  transform: translate(-50%, -50%);
}

.number-input button.plus:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.number-input input[type=number] {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="number-input">
  <button class='btn minus'></button>
  <input class="cart-product-price-multiplier" type="number" name="updates[]" id="updates_{{ item.key }}" value="5" min="0">
  <button class="btn plus"></button>
</div>

JQuery onclick 函数 - 防止页面重新加载并添加将其用作被调用函数中的变量的能力

JQuery onclick function - preventing page reload and adding the ability to use this as a variable in called function

forms

jquery

increment

this