主页 / 问题 / 1270016
Accepted
rabbit
Asked:2022-04-14 16:38:31 +0000 UTC2022-04-14 16:38:31 +0000 UTC

触发 <input type="number"> 元素的 Sum 和 Sub 按钮的单击事件 [重复]

  • 772

我需要为<p>元素的 Sub 和 Sum 按钮定位标签<input type="number">。如果我点击#selCountSub，数字应该会增加，如果点击#selCountSum，那么数字会相应减少。

我可以编写简单的逻辑来做我想做的事。但我想知道是否有办法通过点击标签来触发元素的内部按钮<p>。

我尝试了不同的方法，但它们都不起作用。感谢您的耐心和时间。

jQuery("#selCountSub").on("click", function () {
    jQuery("input[type=number]").trigger(jQuery.Event("keydown change"));
});

jQuery("#selCountSum").on("click", function () {
    jQuery("input[type=number]").trigger(jQuery.Event("keyup change"));
});
p {
    font-size: 24px;
    cursor: pointer;
}

input[type="number"]::-webkit-inner-spin-button {
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="selCountSub">-</p>
<input type="number" value="1" min="1" step="1" />
<p id="selCountSum">+</p>

html

1 个回答

  1. Best Answer

    好吧，这样的事情是可能的，例如：

    let count = $('input').val();
$('p').click(function(){
    if($(this).attr('id') == 'selCountSub' && count > 1) {
    count--;
  }
  else if($(this).attr('id') == 'selCountSum') {
    count++;
  }
  $('input').val(count);
})
    p {
    font-size: 24px;
    cursor: pointer;
}

input[type="number"]::-webkit-inner-spin-button {
    display: none;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="selCountSub">-</p>
<input type="number" value="1" min="1" step="1" />
<p id="selCountSum">+</p>

    • 1

相关问题