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时也可以工作。这是我被困的地方的一个小提琴： 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>

Answer 2

就像提图斯已经说过的那样，prev()和next()函数就是问题所在。

此外，我将使用一些辅助函数来降低复杂性并更好地了解正在发生的事情。缓存变量始终是一个好主意。还有一点是可能的负值。在您的代码示例中，将检查输入值的> 0，但是如果您的值为1，然后按“ -10”按钮，您将得到-9。

您可以在此行中阻止它：

if (v <= 0) { v = 0; }

这里是完整的示例：

var $input = $('#1');

var plus = function( value ) {
  $input.val( parseInt( $input.val() ) + value );
}

var minus = function( value ) {
  var v = parseInt( $input.val() ) - value;

  if (v <= 0) { v = 0; }
  
  $input.val( v );
}

$('.add1').click( function () { plus( 1 ) });
$('.add10').click( function () { plus( 10 ); } );
$('.sub1').click( function () { minus( 1 ); } );
$('.sub10').click( function () { minus( 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/1.6.4/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>

带多个增量按钮的数字微调器

2 个答案: