javascript - 带有多个增量按钮的数字旋转器

Question

所以我对此很陌生，我在网上搜索无法在任何地方找到任何示例，所以如果可能的话我希望在这里获得一些帮助

我想做一个增量数字旋转器..到目前为止一切都很好，我找到了一些上帝，我可以轻松地拥有一个减或加 1 的左右按钮，但是如何在它旁边添加更多按钮，例如减 10 还是加 10？

<div id="field1">field 1
    <button type="button" id="sub10" class="sub10">-10</button>
    <button type="button" id="sub1" class="sub1">-1</button>
    <input type="text" id="1" value="0" class="field" />
    <button type="button" id="add1" class="add1">+1</button>
    <button type="button" id="add10" class="add10">+10</button>
</div>

button {
    margin: 4px;
    cursor: pointer;
}
input {
    text-align: center;
    width: 40px;
    margin: 4px;
    color: salmon;
}

$('.add1').click(function () {
    $(this).prev().val(+$(this).prev().val() + 1);
});
$('.sub1').click(function () {
    if ($(this).next().val() > 0) $(this).next().val(+$(this).next().val() - 1);
});
$('.add10').click(function () {
    $(this).prev().val(+$(this).prev().val() + 10);
});
$('.sub10').click(function () {
    if ($(this).next().val() > 0) $(this).next().val(+$(this).next().val() - 10);
});

-1、+2 按钮工作正常..我想让它工作，这样当我按 -10 或 +10 也可以工作..这是我陷入困境的 fiddle : http://jsfiddle.net/5mvutyb6/

Answer 1

问题是您正在使用 next()和prev()获取 <input/>元素。仅当按下的按钮位于输入的正上方或正下方时才有效。

要解决这个问题，只需通过 ID 获取输入即可。

这是一个例子:

var $input = $('#1');
$('.add1').click(function () {
    $input.val(+$input.val() + 1);
});
$('.sub1').click(function () {
    if ($input.val() > 0) $input.val(+$input.val() - 1);
});
$('.add10').click(function () {
    $input.val(+$input.val() + 10);
});
$('.sub10').click(function () {
    if ($input.val() > 0) $input.val(+$input.val() - 10);
});

button {
    margin: 4px;
    cursor: pointer;
}
input {
    text-align: center;
    width: 40px;
    margin: 4px;
    color: salmon;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="field1">field 1
    <button type="button" id="sub10" class="sub10">-10</button>
    <button type="button" id="sub1" class="sub1">-1</button>
    <input type="text" id="1" value="0" class="field" />
    <button type="button" id="add1" class="add1">+1</button>
    <button type="button" id="add10" class="add10">+10</button>
</div>