jQuery悬停时Span值动态变化，满足条件隐藏值失效问题求助

首先得说，你这段代码里有个关键的小错误，导致条件判断根本没起作用——看这行：

var stocklevel = parseInt($('#inventoryQuantity').text(variant.inventory_quantity)); 

$('#inventoryQuantity').text(variant.inventory_quantity)是设置元素的文本内容，它返回的是jQuery对象，不是文本值。你用parseInt去转一个对象，得到的只会是NaN，自然if(stocklevel < 10)永远不会触发，大于10的数值也就一直显示了。

修正后的核心逻辑 #

先获取正确的库存数值，再判断是否显示：

// 先拿到当前变体的库存数，不用先设置到DOM里
var stocklevel = parseInt(variant.inventory_quantity);
// 获取目标元素
var $inventoryQty = $('#inventoryQuantity');

if(stocklevel < 10) {
    // 库存小于10时显示真实数值
    $inventoryQty.text(stocklevel);
} else {
    // 库存大于等于10时隐藏数值，比如用"充足"代替，或者空文本
    $inventoryQty.text('库存充足');
    // 如果只是想隐藏数值但保留元素位置，也可以用：
    // $inventoryQty.text('');
}

适配鼠标悬停更新的场景 #

既然鼠标悬停会触发数值更新，你需要把这段判断逻辑放到触发更新的事件回调里，比如如果是hover事件：

// 假设是某个元素hover时更新库存
$('.your-hover-element').hover(function() {
    // 这里应该是获取当前变体的逻辑，比如拿到variant对象
    var stocklevel = parseInt(variant.inventory_quantity);
    var $inventoryQty = $('#inventoryQuantity');
    
    if(stocklevel < 10) {
        $inventoryQty.text(stocklevel);
    } else {
        $inventoryQty.text('库存充足'); // 或者空字符串
    }
});

如果是Shopify的变体切换（从你用的variant对象来看大概率是这个场景），还可以监听variantChange事件，确保每次变体切换（包括hover触发的）都执行判断：

document.addEventListener('variantChange', function(event) {
    var variant = event.detail.variant;
    var stocklevel = parseInt(variant.inventory_quantity);
    var $inventoryQty = $('#inventoryQuantity');
    
    if(stocklevel < 10) {
        $inventoryQty.text(stocklevel);
    } else {
        $inventoryQty.text('库存充足');
    }
});

额外提示 #

• 记得处理库存为null或者非数字的情况，比如加个兜底判断：var stocklevel = parseInt(variant.inventory_quantity) || 0;
• 如果只是想隐藏元素而不是替换文本，也可以用$inventoryQty.hide()，但hover触发更新时要记得先show()再执行判断逻辑。

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