Question

我有两个按钮可以向上或向下移动一个框，使用JQuery来获取CSS＆＃39; top＆＃39;正在添加或减去的值。从中减去时，它按预期工作，但添加到它时不会。

似乎是添加符号混淆连接的情况。然后在添加的数字周围加上一些括号，但这没有区别。

工作代码，即减法发生时如下所示：

$('#dir_panel_form').css({
    'top': $('#dir_panel_form').css('top').substring(0, $('#dir_panel_form').css('top').length - 2) - 30 + 'px'
});

非工作代码，即添加发生时，如下所示，额外的括号括号：

$('#dir_panel_form').css({
    'top': ($('#dir_panel_form').css('top').substring(0, $('#dir_panel_form').css('top').length - 2) + 30) + 'px'
});

带有额外括号的片段（再次加粗）也显示如下：

($('#dir_panel_form').css('top').substring(0, $('#dir_panel_form').css('top').length - 2) + 30)

任何人都可以找到这个吗？

Answer 1

问题是因为substring返回一个字符串。因此，以下+运算符变为串联而不是加法。您需要使用parseInt()将字符串转换为整数。

$('#dir_panel_form').css({
    'top': parseInt($('#dir_panel_form').css('top').substring(0, $('#dir_panel_form').css('top').length - 2), 10) + 30 + 'px'
});

另请注意，您可以使用较短的slice(0, -2)从字符串中删除最后两个字符并为css()方法提供函数，从而进一步提高此功能。这将提高性能，因为只有一个请求而不是三个。

$('#dir_panel_form').css('top', function(i, top) {
    return parseInt(top.substring(0, -2), 10) + 30 + 'px'
});

Answer 2

尝试使用parseInt代替substring函数，因此请替换

($('#dir_panel_form').css('top').substring(0, $('#dir_panel_form').css('top').length - 2) + 30) + 'px'

到

parseInt($('#dir_panel_form').css('top')) + 30 + 'px'

添加符号被混淆为连接

2 个答案: