时间戳

首页 > 解决方案 > 如何使用 wordpress 在 DOM 中附加回调函数

jquery - 如何使用 wordpress 在 DOM 中附加回调函数

问题描述

在此处输入图像描述我在将回调函数显示在 HTML DOM 上时遇到问题。想法是获取基金的 ID，然后使用 ID 获取基金价格和查看历史记录。我得到的是未定义的

查看历史记录应该将用户带到他们在分页表中查看基金价格历史记录的地方。

对于查看历史页面，想法是将 id 传递到 url 并获取想法并在传递到 url 的 id 上查询端点页面。但查看历史记录需要基金 ID、开始日期和结束日期 https://api.premiumpension.com/multichannel/swagger/ui/index#!/Prices/Prices_GetFundPriceByDateRange

我将非常感谢您的帮助谢谢

        jQuery(document).ready(function ($) {
        jQuery.ajax({  
            type: 'GET',
            url: 'https://api.premiumpension.com/multichannel/api/Prices/GetAllFundNames',
            contentType: "application/json",
            success: function(resp) {
              for (var i = 0; i < resp.result.length; i++) {
              //  console.log('hello: results', JSON.stringify(resp.result[i].FUND_NAME));
             //${resp.result[i].FUND_ID} ${resp.result[i].FUND_NAME}
             //callbackfun(resp.result[i].FUND_ID)
                callbackfun(resp.result[i].FUND_ID);
                $('#pensionfund').append(
                   `<div col-md-3>
                       <h5>Price ${i+1}</h5>
                       <a id='#price${i+1}'>${resp.result[i].FUND_NAME}
                      <hr>
                       <p id="priceplace">${callbackfun(resp.result[i].FUND_ID)}</p>
                       <hr>
                       <a target="_blank" href="https://p/view-history/${i+1}" rel="noopener noreferrer">View History</a>
                      </p>
                    </div>`
                );
              }
            },

            error: function(xhr, status, error){
               var errorMessage = xhr.status + ': ' + xhr.statusText
               alert('Error - ' + errorMessage);
            }
    });

    });

     function callbackfun(resp)
     {
        jQuery.ajax({  
                type: 'GET',

                url: 'https://api.premiumpension.com/multichannel/api/Prices/GetCurrentFundPrice?fundId=' + resp ,
                contentType: "application/json",
                success: function(resp) {
                  console.log("This the result: ",resp);


                 for (var i = 0; i < resp.result.length; i++) {
                  //console.log("This is the innerLoop", resp.result[i].UnitPrice)
                    $('#priceplace').append(`<h5> ${resp.result[i].UnitPrice}</h5>`);

                     //document.getElementById('unitprice').innerText = resp.result[i].UnitPrice;

              }
              },
              });
    }
    ```

标签： jqueryhtmlajaxdomappend

解决方案

在下面的代码中，我将每个 div 的值分配给append_datafor 循环，然后将该数据添加到<div id="pensionfund"></div>using .html()。另外，我已经id为所有将显示的 div分配了唯一性，unit-price因为我们不能有很多 id same name。工作示例：

// find elements
var append_data = "";
$(document).ready(function($) {
  $.ajax({
    type: 'GET',
    url: 'https://api.premiumpension.com/multichannel/api/Prices/GetAllFundNames',
    contentType: "application/json",
    success: function(resp) {
      for (var i = 0; i < resp.result.length; i++) {
        callbackfun(resp.result[i].FUND_ID)
   //append data to variable
        append_data += "<div col-md-3> <h5>Price '" + i + 1 + "'</h5<p id='#price'" + i + 1 + "'>" + resp.result[i].FUND_NAME + "<hr><p id='priceplace_" + resp.result[i].FUND_ID + "' onclick='callbackfun(" + resp.result[i].FUND_ID + ")'></p><hr><a target='_blank' href='https://p/view-history/" + i + 1 + "' rel='noopener noreferrer'>View History</a></p></div>";


        //console.log(resp.result[i].FUND_ID);
      }
      //put data in div with id pensionfund
      $("#pensionfund").html(append_data);
    },


    error: function(xhr, status, error) {
      var errorMessage = xhr.status + ': ' + xhr.statusText
      alert('Error - ' + errorMessage);
    }
  });

});

function callbackfun(resp1) {
  $.ajax({
    type: 'GET',

    url: 'https://api.premiumpension.com/multichannel/api/Prices/GetCurrentFundPrice?fundId=' + resp1,
    contentType: "application/json",
    success: function(resp) {
//assign price to particular id i.e :priceplace_1,priceplace_11 etc
      $('#priceplace_' + resp1).html("<h5> UNIT PRICE : " + resp.result.UnitPrice + "</h5>");



    },
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="pensionfund"></div>

推荐阅读