所以我想要这样的东西:
如您所见,有一个 +
和 -
按钮,如果单击它们,它们会显示附加在 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);
});
最佳答案
我看了你的 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);
});
关于javascript - jQuery 递增和递减按钮将应用的值附加到数字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36884775/