响应式6列对比器移动端列隐藏代码失效求助

嘿，我来帮你搞定这个问题～你代码失效的原因很明确：直接把数组和选择器字符串拼接，生成的是无效的jQuery选择器。

问题分析 #

你写的$('.column-' + y)里，数组y会被自动转成字符串"2,3,4,5,6"，最终生成的选择器是.column-2,3,4,5,6。这个选择器只会匹配.column-2元素，后面的3、4等是被当成标签名来查找的（显然不存在这类标签），所以只有第2列会被加上类，其他列都没被选中。

修复方案 #

这里给你两种简单有效的修复方式：

方案1：遍历数组逐个处理元素

直接循环数组里的每个列号，单独选中对应元素添加类：

// 在移动设备上调用该函数
function hideColumns(){
  var y = [2, 3, 4, 5, 6]; // 想要隐藏的列编号
  y.forEach(function(columnNum) {
    $('.column-' + columnNum).addClass('display-none');
  });
}

方案2：生成正确的选择器字符串

把数组转换成符合jQuery语法的选择器（比如.column-2, .column-3, ...），再一次性选中所有目标元素：

// 在移动设备上调用该函数
function hideColumns(){
  var y = [2, 3, 4, 5, 6]; // 想要隐藏的列编号
  // 把数组转成逗号分隔的选择器字符串
  var targetSelectors = y.map(num => '.column-' + num).join(', ');
  $(targetSelectors).addClass('display-none');
}

额外：原生JS实现（如果不想依赖jQuery）

要是你之后想去掉jQuery依赖，也可以用原生JS写：

// 在移动设备上调用该函数
function hideColumns(){
  var y = [2, 3, 4, 5, 6]; // 想要隐藏的列编号
  y.forEach(function(columnNum) {
    const columnElement = document.querySelector('.column-' + columnNum);
    if (columnElement) { // 避免找不到元素报错
      columnElement.classList.add('display-none');
    }
  });
}

这几种方法都能正确给第2到第6列加上.display-none类，实现移动端只显示第一列的需求～

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