基于jQuery实现购物车值联动字段显隐的条件写法咨询

原代码核心问题 #

1. val()返回字符串类型，直接与数字比较可能出现非预期结果（例如空字符串、非数字内容会导致判断逻辑失效）
2. 未调用updateTextFieldVisibility()函数，页面加载时不会执行判断
3. 若#grid-12-12-12不是输入框，val()无法获取到购物车数值

分场景修正方案 #

场景1：#grid-12-12-12是输入框（input/select等）

将获取到的字符串转为数字，同时处理非数字异常，再执行判断：

$(document).ready(function() {
  function updateTextFieldVisibility() {
    var textField = $('#grid-2');
    // 转为十进制整数，处理空值/非数字情况
    var cartCount = parseInt($('#grid-12-12-12').val(), 10);
    cartCount = isNaN(cartCount) ? 0 : cartCount;

    // 用toggle简化显示/隐藏逻辑
    textField.toggle(cartCount > 0);
  }

  // 页面加载时执行一次
  updateTextFieldVisibility();
  // 监听输入框变化，实时更新显示状态
  $('#grid-12-12-12').on('input change', updateTextFieldVisibility);
});

场景2：#grid-12-12-12是普通文本元素（div/span等）

用text()获取内容，去除空格后转数字，同时监听元素内容变化：

$(document).ready(function() {
  function updateTextFieldVisibility() {
    var textField = $('#grid-2');
    // 获取文本并去除前后空白字符
    var cartText = $('#grid-12-12-12').text().trim();
    var cartCount = parseInt(cartText, 10);
    cartCount = isNaN(cartCount) ? 0 : cartCount;

    textField.toggle(cartCount > 0);
  }

  // 页面加载时执行一次
  updateTextFieldVisibility();
  // 监听元素内容变化（应对AJAX动态更新购物车的情况）
  var target = document.getElementById('grid-12-12-12');
  var observer = new MutationObserver(updateTextFieldVisibility);
  observer.observe(target, { childList: true, subtree: true });
});

关键注意事项 #

• 必须处理非数字异常：当购物车元素内容为空或包含非数字字符时，默认视为0，避免判断逻辑出错
• 页面初始化时要主动调用判断函数，确保加载时状态正确
• 动态更新购物车数量时，需绑定对应触发事件（输入框的input/change，普通元素用MutationObserver）

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