如何在指定元素值为-1时隐藏表格行？jQuery change对div无效

你的代码无效的核心原因是：如果.dd-selected-value是第三方插件生成的元素（比如自定义下拉组件的隐藏输入框），插件更新其值时没有触发原生的change事件，导致你的事件监听器无法捕获值变化。另外也需要确保初始加载时就根据当前值处理目标元素的显示状态。

以下是两种可行的解决方案：

方案一：使用MutationObserver监听值变化 #

通过监听输入框的value属性变化，无论值是通过插件还是其他方式更新，都能捕获到：

const targetInput = $('.wooco_component_product[data-name="Kaartje"] input.dd-selected-value')[0];
if (targetInput) {
  // 创建观察者实例，监听value属性变化
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      if (mutation.attributeName === 'value') {
        const currentValue = targetInput.value;
        $('.card-text-field').toggleClass('hidden-card-text-field', currentValue === "-1");
      }
    });
  });

  // 配置观察规则：只监听value属性
  observer.observe(targetInput, { attributes: true, attributeFilter: ['value'] });

  // 页面加载时先执行一次状态判断
  $('.card-text-field').toggleClass('hidden-card-text-field', targetInput.value === "-1");
}

方案二：监听下拉选项的点击事件 #

如果是自定义下拉组件，直接监听选项的点击事件，触发状态更新：

// 监听下拉选项的点击（适配插件的DOM结构，若选项类名不同需调整）
$(document).on('click', '.wooco_component_product[data-name="Kaartje"] .dd-option', function() {
  const selectedValue = $(this).data('value'); // 若插件用其他属性存值，替换成对应属性
  $('.card-text-field').toggleClass('hidden-card-text-field', selectedValue === "-1");
});

// 页面加载时初始化状态
const initialValue = $('.wooco_component_product[data-name="Kaartje"] input.dd-selected-value').val();
$('.card-text-field').toggleClass('hidden-card-text-field', initialValue === "-1");

关键说明 #

• 用toggleClass替代手动判断添加/移除类，代码更简洁
• 必须添加初始状态检查，确保页面加载时就根据当前选中值显示/隐藏目标元素
• 若方案二中选项的类名或值存储属性与实际不符，需根据页面DOM结构调整选择器和属性名

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