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

Question

所以我想要这样的东西：

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

总而言之，我想要的是：

• 例如，如果我点击了四次+，它将显示12+4（+4 部分为绿色）
• 如果我点击- 六次，它将显示12-2（-2 部分为红色），
• 如果我再单击- 十次，它将停在值12-12 并提示/警报Do you really want to delete this load?（与最右侧的x 按钮功能相同）。

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

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

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

附言。我正在通过 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

我看过你的小提琴，对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);
});