使用JS/PHP实现点击质押期限单选按钮时动态计算对应收益率百分比

实现方案 #

第一步：调整现有HTML属性 #

首先修正2个现有HTML的问题：

• 不同代币行的单选框name属性重复，导致不同代币的质押期限会互斥，需要给每行单独设置name
• 单选框的value改为对应质押天数，同时给收益率列增加存储默认收益率的自定义属性，方便后续计算
  修改后的示例HTML：

<head>
<link rel="stylesheet" href="https://coinscord.com/coin/bootstrap/css/bootstrap.min.css">
<!-- 如果项目还没引入jQuery，先引入jQuery库即可 -->
</head>

<ul class="responsive-table">
    <li class="table-header">
      <div class="col col-1">Token</div>
      <div class="col col-2">Est. APY</div>
      <div class="col col-3">Duration (days)</div>
      <div class="col col-4"></div>
    </li>
   
    <li class="table-row">
      <div class="col col-1" data-label="icon"><img src="" alt="icon" style="width:30px;height:30px;">&nbsp;&nbsp;ADA</div>
      <!-- 增加data-default-apy属性存30天默认收益率，值直接写数据库输出的数值即可 -->
      <div class="col col-2 apy-display" data-label="Percent" data-default-apy="15"><font color="green">15%</font></div>
      <div class="col col-3" data-label="Days"><div class="radio-toolbar">
  <!-- name改为每行唯一，value改为对应天数 -->
  <input type="radio" id="radio1" name="radios_ada" value="30" checked>
  <label for="radio1">30</label>

  <input type="radio" id="radio2" name="radios_ada" value="60">
  <label for="radio2">60</label>
  
  <input type="radio" id="radio3" name="radios_ada" value="90">
  <label for="radio3">90</label>
</div></div>
    </li>
    <li class="table-row">
      <div class="col col-1" data-label="icon"><img src="../coin/images/coins/bnb.png" alt="bnb" style="width:30px;height:30px;">&nbsp;&nbsp;BNB</div>
      <div class="col col-2 apy-display" data-label="Percent" data-default-apy="10.4"><font color="green">10.4%</font></div>
      <div class="col col-3" data-label="Days"><div class="radio-toolbar">
  <input type="radio" id="radio7" name="radios_bnb" value="30" checked>
  <label for="radio7">30</label>

  <input type="radio" id="radio72" name="radios_bnb" value="60">
  <label for="radio72">60</label>
  
  <input type="radio" id="radio73" name="radios_bnb" value="90">
  <label for="radio73">90</label>
</div></div>
   
    </li>
    
  </ul>

你原有的CSS代码不需要做任何修改，可以直接使用。

第二步：添加JS实现逻辑 #

直接在页面末尾添加以下代码即可实现需求：

$(function() {
  // 监听所有质押期限单选框的变化事件
  $('input[type="radio"][name^="radios_"]').on('change', function() {
    // 获取当前选中的天数
    const selectedDays = parseInt($(this).val());
    // 获取当前行的默认收益率
    const $currentRow = $(this).closest('.table-row');
    const defaultApy = parseFloat($currentRow.find('.apy-display').data('default-apy'));
    
    // 按规则计算对应收益率
    let finalApy;
    switch(selectedDays) {
      case 30:
        finalApy = defaultApy;
        break;
      case 60:
        finalApy = defaultApy * 1.3;
        break;
      case 90:
        finalApy = defaultApy * 1.6;
        break;
    }
    // 保留1位小数后更新到页面展示
    $currentRow.find('.apy-display font').text(finalApy.toFixed(1) + '%');
  })
})

代码说明 #

• 给收益率列加data-default-apy属性直接存储数据库返回的30天默认收益率，不需要额外发起接口请求
• 单选框选中后自动识别当前所在行的默认收益率，按比例计算后更新展示，不同代币的计算互不影响
• 可以根据需求调整toFixed(1)里的数字，修改收益率保留的小数位数

内容的提问来源于stack exchange，提问作者Steven Helson