javascript - 迭代每个面积值

Question

我有一个由 6 列组成的响应式比较器。在移动设备上，此比较器切换到选项卡式面板，我只想通过向其他列添加 .display-none 类来显示第一列。

这个比较器的每一列都有一个像.column-1, .column-2...

我尝试了以下代码但没有成功(.display-none 类未添加到所有想要的项目):

// calling the function on mobile devices
function hideColumns(){
    var y = [2, 3, 4, 5, 6]; // column number I want to hide
    $('.column-' + y).each(function(){
        $(this).addClass('display-none');
    });
}

Answer 1

您没有遍历分配给 y 变量的数字列表。你需要这样做。当前代码给出的东西不是您想要的...

var y = [2, 3, 4, 5, 6]; 
'.column-' + y // ".column-2,3,4,5,6"

基本上，您在这里找到了一个具有类 "column-2,3,4,5,6" 的 dom 元素。以下是您遇到的问题。而是你这样做

function hideColumns() {
    var classes = [2, 3, 4, 5, 6].map(num => `.column-${num}`).join(', ');

    $(classes).addClass('display-none');
}

演示:

function hideColumns() {
  var classes = [2, 3, 4, 5, 6].map(num => `.column-${num}`).join(', ');
  $(classes).addClass('display-none');
}

$('.start').on('click', hideColumns);

.display-none {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="column-1">1</div>
<div class="column-2">2</div>
<div class="column-3">3</div>
<div class="column-11">11</div>
<div class="column-4">4</div>
<div class="column-5">5</div>
<div class="column-15">15</div>
<div class="column-6">6</div>

<button class="start">
Play the Demo
</button>