javascript - 将谷歌货币转换器应用于页面上的所有价格

标签 javascript jquery currency

我想做的是使用jquery、ajax和google货币转换页面上的所有价格。

我发现了这个,它工作正常。

$('#submit').click(function(){
     //Get the values
     var amount = $('#amount').val();
     var from  = $('#from').val();
     var to = $('#to').val();
     var params = "amount=" + amount + "&from=" + from + "&to=" + to ;

     $.ajax({
       type: "POST",
       url: "currency-converter.php",
       data: params ,
       success: function(data){
            $('#converted_value').html(amount + from +" is equal to : " +data);

       }
     });
    }) ;

如何将其应用于页面上的 div 类?假设我有一个priceEuro 类;

<div class="product">
      <div class="priceEuro"><?php the_field('price1'); ?></div>
</div>

<div class="product">
      <div class="priceEuro"><?php the_field('price2'); ?></div>
</div>

<div class="product">
      <div class="priceEuro"><?php the_field('price3'); ?></div>
</div>

现在我想转换所有不同的价格并将结果添加到这样的产品中,

$('.priceEuro').each(function () {

                         var amount = $(this).val();
             var params = "amount=" + amount + "&from=EUR" + "&to=USD" ;

             $.ajax({
               type: "POST",
               url: "currency-converter.php",
               data: params ,
               success: function(data){
                $(this).append("<div class="priceUsd">'+ data +'</div>");

               }
             });

我知道这样不对,那么解决方案是什么?谢谢。

<小时/>

感谢@UnTechie,现在我得到了结果,

$(document).ready(function() {

    $.each($('.priceEuro'), function () {

     var amount = $(this).text();
     var dataString = "amount=" + amount + "&from=EUR" + "&to=USD";

         $.ajax({
           type: "POST",
           url: "chalo/themes/chalo/ajax_converter.php",
           data: dataString,
           success: function(data){
                console.log(data);
                $(this).append('<div class="priceUsd">'+ data +'</div>');
           }
         });
    });

});

但我无法在每个 div 之后附加这些结果,这是错误的吗?

$(this).append('<div class="priceUsd">'+ data +'</div>');
<小时/>

好的,我发现问题了。 this 不会自动引用 ajax 回调中的正确对象。

现在它的工作方式是这样的,

$(document).ready(function() {

    $.each($('.priceEuro'), function () {
     var $this = $(this);
     var amount = $(this).text();
     var dataString = "amount=" + amount + "&from=EUR" + "&to=USD";

         $.ajax({
           type: "POST",
           url: "chalo/themes/chalo/ajax_converter.php",
           data: dataString,
           success: function(data){
                console.log(data);
                $this.append('<div class="priceUsd">'+ data +'</div>');
           }
         });
    });

});

最佳答案

您需要使用 jquery.each( http://api.jquery.com/jQuery.each/ )

这就是你的代码应该是什么样的..

$.each($('.priceEuro'), function () {
 //Your code goes here ... Use $(this) to access each element

});

关于javascript - 将谷歌货币转换器应用于页面上的所有价格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16522562/

相关文章:

javascript - 具有自定义浮点索引的二维数组式数据结构

Javascript:如何访问名称为动态的属性?

javascript - FIrebug 中不包含文件且为空的脚本元素

lua - 格式化数字以分隔千值(例如 12000000 将变为 12 000 000)

javascript - 如何在 Chrome 扩展的内容脚本中导入 ES6 模块

javascript - jQuery ajax 无法正常工作

javascript - JQuery 通过给定的 id 改变类

jQuery 不会更新 td 背景颜色 - 包含代码

C++ 程序 - "Making Change"应用程序产生奇怪的结果

javascript - 带有逗号和小数的正确 JS 货币格式