Jquery货币随cookie功能变化

时间:2012-06-26 13:15:46

标签: jquery cookies geolocation currency

我有一个网站Hostingshine.com

我希望脚本可以正常工作,否则你可以看到这个

$(document).ready( function() { 
    $('#usd').click(function(){
    $('.usd').show();
    $('.inr').hide();
    })

    $('#inr').click(function(){
    $('.inr').show();
    $('.usd').hide();
    })
          });  

将它与Jquery一起使用,

页面就像这样

<ul id="currencychange"><li>
  <a id="usd">USD</a>&nbsp;<a id="inr">INR</a>
</li></ul>

并将课程inr和usd给我想要显示所需货币的地方 但每当我更换页面或刷新页面时,它都会回到默认状态,即usd。

请帮助我,帮助我获取cookie函数或geo函数来使用此代码......

提前致谢。

2 个答案:

答案 0 :(得分:1)

You can use geoplugin library from here 
http://www.geoplugin.com/webservices/javascript
and do something like following code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script language="JavaScript" src="http://www.geoplugin.net/javascript.gp" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            var currencyCode = geoplugin_currencyCode();
            $('#currencychange').children().children().each(function () {
                if ($(this).attr('id') != currencyCode.toLowerCase()) {
                    $(this).hide();
                }


            });


        });
    </script>
</head>
<body>
<ul id="currencychange">
    <li>
        <a id="usd">USD</a>&nbsp;<a id="gbp">GBP</a>
    </li>
</ul>

</body>
</html>

答案 1 :(得分:1)

以下是David的完整解决方案:您必须添加对geoplugin和money.js的引用,就像我在下面的代码中所做的那样。 我还在每一行后添加了评论。如果你不明白任何事情只是问。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <!--Add a reference to geoplugin -- we will use this to get geo/local settings -->
    <script language="JavaScript" src="http://www.geoplugin.net/javascript.gp" type="text/javascript"></script>

    <!--Add a reference to money.js -- we will use this to convert our currency -->
    <script type="text/javascript" src="http://josscrowcroft.github.com/money.js/money.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            // get local currency code using geo plugin
            var localCurrencyCode = geoplugin_currencyCode();


            // make an ajax call to open exchange rates
            $.ajax({
                url: 'http://openexchangerates.org/latest.json',
                dataType: 'jsonp',
                success: function(json) {
                    // Rates are in `json.rates`
                    // Base currency (USD) is `json.base`

                    // set the returned values to money.js object
                    // we will use this later for currency conversion
                    fx.rates = json.rates;
                    fx.base = json.base;

                    // get exchange rate for local currency
                    var exchangeRate = json.rates[localCurrencyCode];

                    // get all elements on page that has a class of currency (you can use the same logic for selection or have your own)
                    $(".currency").each(function () {
                        // extract price eg if $10.00 get 10
                        var priceRaw = parseFloat($(this).html().replace('$',''));

                        // convert the price to local price
                        // we use money.js for this
                        var priceLocal = fx(priceRaw).from(fx.base).to(localCurrencyCode);


                        // finally we construct our price and inject it in the html
                        var finalPrice = localCurrencyCode +  priceLocal;
                        $(this).html(finalPrice) ;

                    });
                }
            });




        });
    </script>
</head>
<body>
<ul id="currencychange">
    <li>
        $10 = <a class="currency">$10</a><br>
        $20 = <a class="currency">$20</a><br>
        $30 = <a class="currency">$30</a><br>
    </li>
</ul>

</body>
</html>