Question

我正在构建货币切换器并将其集成到我的网站中，用户可以在这两种货币之间切换。它是一个预订网站，预订表格位于左侧，预订内容占据了页面的其余部分

网站上的价格默认/设置为后端（USD）中的一种货币，用户可以选择此货币与另一种货币。

当用户选择其他货币时，页面会重新加载并将价格设置为此货币。现在，当用户更改预订表单上的输入时，会出现小问题。假设用户想要更改结帐日期，一旦他们这样做，页面上的内容将使用ajax重新加载。发生的情况是：如果用户已切换到另一种货币并对预订表单进行更改，则默认货币（USD）会加载几秒钟，然后由另一种货币替换。所以想象一下，你已经从默认转换货币，你通过更改其中一个输入来修改你的预订表格，因为页面ajax重新加载，你会立即显示默认价格然后是正确的（你的货币）使用）显示

所以简而言之，看起来像携带价格的div首先加载默认货币然后切换（需要1-5秒）。这不是很理想，div不能一次加载正确的货币吗？

这是处理此问题的代码：

//there's a function that checks currency...
    if(currency_param == "KES")
    {
        if (window.XMLHttpRequest) 
        {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            var xmlhttp = new XMLHttpRequest();
        }
        else 
        {
            // code for IE6, IE5
            var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) 
            {
                    area.content_area.find('.gdlr-tail-currencyprice').html(this.responseText);
            }
        };
        var result = data.content.match(/\$[\d\.]+ \/ [^<]+/gi);
        var newArray = [];

        $('.gdlr-tail-currencyprice').each(function(index, el)
        {
            var num_price = parseFloat(result[index].replace( /[^\d\.]*/g, ''));
            newArray.push(num_price);
        });

        newArray.push({currency_param});
        newArray = JSON.stringify(newArray);

        xmlhttp.open("GET","switchcurrency.php?q="+newArray,true);
        xmlhttp.send();
       }
    }

switchcurrency.php只需获取传递给它的金额并转换为所需的货币

价格在gdlr-tail-currencyprice类中进行，如上所述，这是有问题的部分。加载默认值，然后几秒钟后，显示正确的值。这部分处理：

area.content_area.find('.gdlr-tail-currencyprice').html(this.responseText);

希望我的长篇帖子能够明确我的问题：我可能做错了什么，或者如果没有，是否有办法用提供的新值完全替换div内容？

Answer 1

我认为你自己太难了。正如我在您对您的问题的评论中提到的，您可以将不同货币的不同价格添加到显示价格的元素的数据属性中。如果您对元素使用standardized names for currency属性，并为货币选择器的值使用相同的名称，那么您自己就可以轻松实现。

例如：

<select name="currency-selector">
    <option value="EUR">Euro</option>
    <option value="NZD">NZ Dollar</option>
    <option value="USD">US Dollar</option>
</select>

此外，您还可以在整个页面中显示应该显示某些内容的价格的内容。你说预订，所以我假设它是预订页面的东西，让我们假设一个酒店。

A楼，1楼，123室每晚价格： 100欧元 110新西兰元 120美元

使用数据，使用您正在使用的任何系统创建/渲染元素，例如下面

<input type="radio" name="select-room" class="contains-price" data-price-eur="100" data-price-nzd="110" data-price-usd="120">123, first floor

在某个地方你会有一张桌子（显然是使用<div>元素而不是<table>创建的，对吧？对吧！？:)）

然后，您可以使用/修改显示的价格。当所选货币被修改时，使用.change()功能获取它们。

$('.currency-selector').change(function() {
    var currency = $(this).val(),
        roomPrice = $('input[name="select-room"]').data('price' + currency);

    // Now display the `roomPrice` somewhere, such as the mentioned table
});

这只是一个例子，因为你的问题很多都不清楚。但是，这确实回答了您的问题的这一部分：

简而言之，看起来像带有价格的div首先加载默认货币然后切换（需要1-5秒）。这是不是很理想，不能只是加载正确的货币一次？

使用.change()进行的更改是立竿见影的。

要自动为表单中的所有价格执行此操作，您可以将代码示例修改为以下内容：

$('.currency-selector').change(function() {
    var currency = $(this).val();

    // Loop through all elements that have the class "contains-price"
    $.each('.contains-price', function(index, $element) {
        var roomPrice = $element.data('price' + currency);

        // Now display the `roomPrice` somewhere, such as the mentioned table
        // NOTE: specifically do not loop all inputs in a form using $('input') as this does not account for <textarea> and <select>
    });
});

Answer 2

当您切换货币时，您应该记住cookie或其他内容，以便服务器可以使用正确的货币呈现ajax响应。

如果它是查询参数，那么它已经足够了。服务器知道关于当前货币，为什么它会呈现默认货币？

Ajax：完全用新数据替换div内容

2 个答案: