對屬性值執行數學運算

我正在嘗試使用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

回答

相關問題