对属性值执行数学运算

我正在尝试使用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。显然我不明白如何添加，因为+将两个值连接起来，而不是将它们相加。它是否需要将属性值从一个字符串转换为一个整数？

来源

2011-09-06 stefmikhail

你必须转换为使用parseInt()一个数字，否则+会做字符串连接：

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

如果属性也可以是浮动，使用parseFloat()代替parseInt()。

来源

2011-09-06 17:25:27

谢谢。我觉得有点像个白痴。在提交问题之后我马上就明白了。尽管你的答案更具信息量。再次感谢。 – stefmikhail

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

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

否则，+将执行字符串连接。另外，如果您需要mwidth是一个浮点数，这样做：

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

来源

2011-09-06 17:26:04 FishBasketGordo

为什么不！！isNaN（mWidth）然后parseInt？ – JohnJohnGa

@JohnJohnGa - 那会怎样？ – stefmikhail

因为'attr'返回的值总是一个字符串。另外，'isNaN'只检查一个对象是否是'NaN'，这是一个特殊的值。 https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/isNaN – FishBasketGordo

你可以做两件事情：

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

来源

2011-09-06 17:26:18 Joe

我认为你必须做一些事情更安全（因为它始终是更好）; 你应该检查它是否是一个数字或不： 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/

来源

2011-09-06 20:05:22 JohnJohnGa

回答

相关问题