PrestaShop 1.6中removeClass无法移除hidden类问题求助

你的alert能正常触发，说明点击事件的逻辑是通的，问题大概率出在元素选择、CSS优先级或者jQuery的使用方式上，我给你几个排查和解决的方向：

1. 修正事件绑定的目标元素 #

你当前绑定了所有input的点击事件，这可能会导致不必要的干扰，而且提前定义的ckbox变量，在其他input被点击时可能并非你目标的#gift复选框。直接把事件绑定到目标复选框上更准确：

jQuery(document).ready(function($) {
  $('#gift').on('click', function () {
    if ($(this).is(':checked')) {
      alert('hidden test');
      $('#bl').removeClass('hidden');
    } else {
      // 可选：取消勾选时重新加上hidden类，恢复隐藏状态
      $('#bl').addClass('hidden');
    }
  });
});

这里用了jQuery(document).ready(function($) { ... })的写法，因为PrestaShop 1.6默认会启用jQuery的noConflict模式，直接用$可能会和其他脚本冲突，这样写可以在回调函数里安全使用$作为jQuery的别名。

2. 检查是否存在重复ID #

PrestaShop的模板文件可能因为循环渲染或者其他原因，生成了多个带有id="bl"的元素，这会导致$('#bl')只选中第一个匹配的元素，而非你目标的那个。你可以在浏览器控制台执行console.log($('#bl').length)，如果返回值大于1，说明存在重复ID，需要把id改成class，或者确保每个元素的id唯一。

3. 强制覆盖CSS样式 #

有时候PrestaShop自带的hidden类可能带有!important标记，或者其他CSS规则优先级更高，导致removeClass执行后元素仍然处于隐藏状态。这时候可以直接设置display属性来强制显示：

$('#bl').removeClass('hidden').css('display', 'inline-block');

因为badge类默认是inline-block布局，设置这个值能确保元素正常显示。

4. 确认元素存在时机 #

如果你的#bl元素是通过AJAX动态生成的（而非直接写在tpl里），那$(document).ready执行时它还不存在，这时候需要用事件委托或者确保在元素生成后再执行移除类的代码。不过从你的描述看，元素是写在tpl里的，这个可能性较低，但可以在控制台执行$('#bl')来验证是否能找到目标元素。

你可以先试试第一个方案，应该能解决大部分情况，如果不行再依次排查后面的点。

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