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

Posted 2023-03-05

【中文标题】如何使用 wordpress 在 DOM 中附加回调函数

【英文标题】：How to append a callback function in the DOM using wordpress

【发布时间】：2020-01-18 10:02:33

【问题描述】：

我在将回调函数显示在 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;

              
              ,
              );
    
    ```

【参考方案1】：

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

// 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>