Question

我正在尝试使用JavaScript对从属性获取的值执行数学运算。该属性是通过PHP循环创建的。我将给出一个包含属性的html标签的示例，但请记住，这些标签中有许多包含唯一的属性值。

HTML：

<a href="secondary_imgs.php..." mwidth="593"></a>

JavaScript（jQuery）：

    $("a[href^='secondary_imgs.php']").click(function(){
        var pageWidth = $(window).width();
        var maxshadowWidth = (Math.floor(pageWidth * 0.91808874)) - 2;
        var mWidth = $(this).attr("mwidth");
        var maxSecondaryWidth = mWidth + 60;
        alert (maxSecondaryWidth);
        if(maxSecondaryWidth <= maxshadowWidth) {
            var shadowWidth = maxSecondaryWidth;
        } else {
            var shadowWidth = maxshadowWidth;
        }
        var shadowboxrel = 'shadowbox;width=' + shadowWidth;
        $(this).attr('rel', shadowboxrel);

这个操作似乎没有用，我觉得这与我在javascript中使用数学运算的经验不足有关。在这种情况下，我认为我在数学运算中使用属性值的方法有问题。

例如，上述width属性定义为593。我将maxSecondaryWidth定义为mWidth + 60。我发出警报，看看我得到了什么价值。它本应显示为653，但“已提醒”的值为59360。显然我不明白如何添加，因为+连接两个值，而不是将它们加在一起。是否需要将属性值从字符串转换为整数？

Answer 1

您必须使用parseInt()转换为数字，否则+将执行字符串连接：

var mWidth = parseInt($(this).attr("mwidth"), 10);

如果该属性也可以是浮点数，请使用parseFloat()代替parseInt()。

Answer 2

这样做是为了确保mwidth是一个数字：

var mWidth = parseInt($(this).attr("mwidth"), 10);

否则，+将执行字符串连接。或者，如果您需要mwidth作为浮点数，请执行以下操作：

var mWidth = parseFloat($(this).attr("mwidth"));

Answer 3

你可以做几件事：

parseInt(mWidth, 10); // int
parseFloat(mWidth); // float
Number(mWidth); // number

否则javascript会认为它是一个字符串。

一些不太常见的转化：

mWidth | 0; // int (javascript bitwise operations are 32-bit signed intergers)
+mWidth; // force Number

Answer 4

我认为你必须做一些更安全的事情（因为它总是更好）; 你应该检查它是否是一个数字： DOM：

<a href="secondary_imgs.php..." mwidth="593"></a>
<a href="secondary_imgs.php..." mwidth="93"></a>
<a href="secondary_imgs.php..." mwidth="ze"></a>
<a href="secondary_imgs.php..." mwidth="5d93"></a>
<a href="secondary_imgs.php..." mwidth="593"></a>
<a href="secondary_imgs.php..." mwidth="593"></a>

JS：

$("a[mwidth]").each(function(){
    var $attr = $(this).attr('mwidth');
    if(!isNaN($attr)){
        sum += (parseInt($attr));
    }
});

如果删除条件，结果将为NaN

看看：http://jsfiddle.net/zVwYB/

对属性值执行数学运算

4 个答案: