javascript - 迭代每个面积值

Question

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

这个比较器的每一列都有一个类，比如.column-1，.column-2......</p>

我尝试了以下代码但没有成功（.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"

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

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>

Answer 2

您的函数和代码似乎没问题，因此错误可能在三个地方。

第一种情况，列的类不对column-1（或2,3,4）不存在。

你可以在console.log($(this))里面检查一下.each()

第二种情况，您永远不会调用该函数。

您可以在函数console.log('check')内部进行检查hideColumns()

最后一种情况， var Y不是 anumber而是array示例中的代码，那么您必须首先迭代数组：

for (let number in y) {
 $('.column-' + y).each(function(){
        $(this).addClass('display-none');
 });
}

Answer 3

这是工作或我的工作：

function hideColumns(){
    var colArray = [2, 3, 4, 5, 6].map(function(number){
        return ('.column-' + number);
    }).join(', ');
    $(colArray).each (function(){
        $(this).addClass('d-none');
    });
};