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

Question

所以我想要这样的东西:

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

总而言之，我想要的是:

• 例如，如果我点击+四次，它将显示12+4(+4部分为绿色)
• 如果我点击 - 六次，它将显示 12-2 (-2 部分为红色)，
• 如果我再点击-十次，它将停在值12-12处并提示/警告你真的要删除这个吗load? (与最右侧的 x 按钮功能相同)。

您看到的问题是，增加增量值是有效的(如果我多次单击+)，但如果我递减它，它只会停止在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);
});