Javascript貨幣轉換

Question

是否有可能使用Javascript或Jquery重新計算貨幣。

例如：

<div id="price">$99.00</div> 

將改爲

<div class="gbp" id="price">£63.85</div> 

如果一個類 「英鎊」 的被應用於div標籤？

Answer 1

你可以做，使用MutationObservers：

(function() { 
 
    var observer = new MutationObserver(function(mutations) { 
 
    // for the class attribute, only the last mutation is important 
 
    var mutation = mutations[mutations.length - 1], 
 
     el = mutation.target; 
 

 
    calculatePrice(el); 
 
    }); 
 

 
    var config = { 
 
    attributes: true, 
 
    attributeFilter: ['class'] 
 
    }; 
 

 

 
    document.addEventListener('DOMContentLoaded', function() { 
 
    var price = document.querySelector('#price'); 
 
    observer.observe(price, config); 
 

 
    [].forEach.call(document.querySelectorAll('button'), function(btn, i) { 
 
     btn.addEventListener('click', function(e) { 
 
     price.className = this.id; 
 
     }); 
 
    }); 
 
    }); 
 

 
    function calculatePrice(el) { 
 
    var currencies = { 
 
     usd: 1, 
 
     gbp: 0.65, 
 
     brl: 3.90 
 
    }; 
 
    
 
    var types = { 
 
     usd: '$', 
 
     gbp: '£', 
 
     brl: 'R$' 
 
    }; 
 

 
    var currentType = Object.keys(types).filter(function(t) { 
 
     return el.textContent.slice(0, types[t].length) === types[t]; 
 
    }); 
 
    
 
    currentType = currentType[0]; 
 
    
 
    var newType = el.className; 
 
    
 
    var vl = Number(el.getAttribute('data-price')) * currencies[newType]; 
 
    el.textContent = types[newType] + vl.toFixed(2); 
 
    } 
 
})();

<div id='price' data-price='99' class='usd'>$99.00</div> 
 
<button id='usd'>Change the class to 'usd'</button> 
 
<button id='gbp'>Change the class to 'gbp'</button> 
 
<button id='brl'>Change the class to 'brl'</button>

正如你可以看到，該按鈕的事件處理程序只改變的input的className：

btn.addEventListener('click', function(e) { 
    price.className = this.id; 
}); 

而observer得到這個改變，併爲你做轉換。