jQuery 递增和递减按钮将应用值附加到数字

Question

所以我想要这样的东西：

如您所见，有一个 + 和 - 按钮，如果单击它们，它们会显示附加在 No. of Units 处的相应值。

总而言之，我想要的是：

例如，如果我点击+四次，它会显示12+4（绿色的+4部分）
如果我点击 - 六次，它将显示 12-2（-2 部分为红色），
如果我再点击 - 十次，它会停在值 12-12 和 prompt/alert Do you really want to delete this load? （与 [=24= 的功能相同） ]按钮在最右边）。

您看到的问题是，增量值的添加有效（如果我多次单击 +），但如果我递减它，它只会停在 0 并在两者之间交替0 和 1（尽管使用的操作仍然是 + 而不是 -），而不是最大默认值（在上图中，是 12).

此外，如果我先点击一个递减按钮，它只会停在0，同样的情况，它在0和1之间交替。

这是为什么？抱歉，我无法提交此代码的前两次迭代，但都存在问题（第一个有效，但它附加了一个 -n 值，因此 12--1 会出现，第二个会绕过def 值限制，它会达到 12-14 等等）。我已经在这里不知所措，所以我需要一些帮助。这是我下面的 jQuery 代码。

PS。我正在通过 jQuery DataTables 构建行，所以我无法显示添加行的代码，因为它不太相关。

PS(2)。这是上面的 JSFiddle 实现。

PS(3)。如果您根据自己的喜好修改下面的代码，我们将不胜感激，因为它遵循上述三个用例。非常感谢。

jQuery

// For increment and decrement no. of units
var def = $('#costcenter_data tr').find('td:nth-child(2)').html(); // default value or the "12" in the example
var out = def;

// Increment button
$('.btn.btn-xs.btn-primary.add-unit').click(function(e){
    var count = $('#costcenter_data tr').find('td:nth-child(2)');
    var value = parseInt(count.data('change_value'));
    var clicked;

    if (isNaN(value) && isNaN(prev)) {
        value = 1;
        count.data('clicked', "+")
    } else {
        value++;
    }
    var prev = count.data('clicked');
    if (prev != "+") {
        clicked = "-";
    } else {
        clicked = prev;
    }

    $('#costcenter_data tr').find('td:nth-child(2)').html(out+clicked+value);
    count.data('change_value', value);
    count.data('clicked', "+");
});

// Decrement button
$('.btn.btn-xs.btn-warning.remove-unit').click(function(e){
    var count = $('#costcenter_data tr').find('td:nth-child(2)');
    var value = parseInt(count.data('change_value'));
    var clicked;

    if (isNaN(value) && isNaN(prev)) {
        value = 1;
        count.data('clicked', "-")
    } else if ((value-1) < 0) {
        value--;
        value = Math.abs(value);

        if (value == parseInt(def)) {
            alert("Delete prompt here");
            return false;
        }
    } else {
        value--;
        clicked = count.data('clicked');
    }
    var prev = count.data('clicked');
    if (prev != "-") {
        clicked = "+";
    } else {
        clicked = prev;
    }

    $('#costcenter_data tr').find('td:nth-child(2)').html(out+clicked+value);
    count.data('change_value', value);
});

Answer 1

我查看了您的 fiddle，对 if 语句进行了一些更改，现在似乎可以正常工作 - https://jsfiddle.net/oscsz4wt/。

我添加了默认 clicked 值，以便从一开始就可以访问它并更改了 if 逻辑。另外 clicked 可能会重命名为 scope 之类的，所以我认为这样会更清楚。

// For increment and decrement no. of units
var def = $('#costcenter_data tr').find('td:nth-child(2)').html();
var out = def;
$('.btn.btn-xs.btn-primary.add-unit').click(function(e) {
  var count = $('#costcenter_data tr').find('td:nth-child(2)');
  var value = parseInt(count.data('change_value'));
  var clicked = count.data('clicked') || '+';

  // If no value
  if (isNaN(value) && isNaN(prev)) {
    value = 1;
    count.data('clicked', "+")
  // If value is positive - increase number
  } else if (value > 0 && clicked == '+') {
    value++;
  // If value is negative - decrease number
  } else if (value > 0 && clicked == '-') {
    value--;
  // If value is 0 - increase number and change scope to '+'
  } else if (value == 0) {
    value++;
    count.data('clicked', '+');
  }
  var prev = count.data('clicked');
  if (prev != "+") {
    clicked = "-";
  } else {
    clicked = prev;
  }

  $('#costcenter_data tr').find('td:nth-child(2)').html(out + clicked + value);
  count.data('change_value', value);
});
$('.btn.btn-xs.btn-warning.remove-unit').click(function(e) {
  var count = $('#costcenter_data tr').find('td:nth-child(2)');
  var value = parseInt(count.data('change_value'));
  var clicked = count.data('clicked') || '-';

  // If no value
  if (isNaN(value) && isNaN(prev)) {
    value = 1;
    count.data('clicked', "-")
  // If value is positive and we are in '+' scope decrease number
  } else if (value > 0 && clicked == '+') {
    value--;
  // If value is positive and we are in '-' scope increase number
  } else if (value > 0 && clicked == '-') {
    value++;
  // If value is 0 - increase number and change scope to '-'
  } else if (value == 0) {
    value++;
    count.data('clicked', '-');
  }

  if (value == parseInt(def) && clicked == '-') {
    alert("Delete prompt here");
    return false;
  }

  var prev = count.data('clicked');

  if (prev != "-") {
    clicked = "+";
  } else {
    clicked = prev;
  }

  $('#costcenter_data tr').find('td:nth-child(2)').html(out + clicked + value);
  count.data('change_value', value);
});

jQuery 递增和递减按钮将应用值附加到数字

jQuery increment and decrement button to append the applied value to a number

javascript

jquery

increment

datatables

decrement

jQuery