如何在jQuery中根据元素类名执行数值计算？

首先，咱们先梳理下你当前写法的几个核心问题：

• 你把判断逻辑写在<a>标签内部的<script>里，这时候this指向的是全局window对象，而非目标<a>元素，所以$(this).hasClass('half')永远返回false。
• 就算判断成功，document.write()在页面加载完成后使用会直接覆盖整个页面内容，这绝对不是你想要的效果。
• 内嵌script+inline onclick的组合，不仅难以维护，还容易出现上下文指向错误。

接下来给你一套可行的解决方案：

步骤1：重构PHP输出的HTML结构 #

先把PHP输出的内容改成更清晰的结构，把关键数据存在data-*属性里，去掉内嵌script，同时给元素加统一类名方便后续选择：

<td class='grav-results-td'>
    <?php if (!empty($check_inbound)): ?>
        <a href="#inbound" class="inbound-link <?php echo $inbound_status; ?> first<?php echo $id; ?>" 
           data-id="<?php echo $id; ?>" 
           data-vendor="<?php echo $vendor; ?>" 
           data-full-amount="<?php echo $inbound; ?>">
            $<?php echo $inbound; ?>
        </a>
    <?php endif; ?>
</td>

这里的优化点：

• 添加inbound-link统一类名，方便jQuery批量选择
• 把id、vendor、完整金额都存在data-*属性里，无需依赖全局变量
• 初始直接输出完整金额，后续通过JS动态修改

步骤2：用jQuery绑定事件并处理金额显示 #

在页面底部（或DOM加载完成的脚本块）添加以下代码：

// 等待DOM完全加载
$(document).ready(function() {
    // 绑定点击事件，替代inline onclick
    $('.inbound-link').on('click', function(e) {
        e.preventDefault(); // 阻止默认跳转行为
        const $link = $(this);
        const id = $link.data('id');
        const vendor = $link.data('vendor');
        
        // 执行原有的comtype逻辑
        comtype(id, 'inbound', vendor);
        
        // 类名变化后，同步更新金额显示
        updateInboundAmount($link);
    });
    
    // 页面初始化时，先统一检查一次类名并更新金额
    $('.inbound-link').each(function() {
        updateInboundAmount($(this));
    });
    
    // 封装金额更新函数
    function updateInboundAmount($element) {
        const fullAmount = $element.data('full-amount');
        if ($element.hasClass('half')) {
            $element.text(`$${fullAmount / 2}`);
        } else {
            // 其他状态（paid/pending）显示完整金额
            $element.text(`$${fullAmount}`);
        }
    }
});

步骤3：在类名变更的逻辑中触发更新 #

如果你的comtype函数负责修改元素类名，记得在函数末尾调用金额更新函数：

function comtype(id, type, vendor) {
    // 原有业务逻辑代码...
    
    // 找到目标元素并修改类名后，触发金额更新
    const $targetLink = $('.inbound-link.first' + id);
    // 示例：移除旧状态类，添加新状态类
    // $targetLink.removeClass('half paid pending').addClass(newStatus);
    
    // 更新金额显示
    updateInboundAmount($targetLink);
}

为什么之前的写法失效？ #

1. this指向错误：内嵌script中的this指向window，而非目标<a>元素，导致类名判断永远不成立。
2. document.write()的风险：页面加载完成后使用该方法会清空整个页面，属于错误用法，应该用DOM操作更新元素内容。
3. 执行时机问题：内嵌script在页面解析时就会执行，此时元素类名还未被修改（类名是点击后才变更的），判断逻辑根本不会触发。

这样修改后，无论是页面初始化时，还是点击后类名变化时，都能正确根据类名显示对应金额了。

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