时间戳

首页 > 解决方案 > 迭代每个面积值

javascript - 迭代每个面积值

问题描述

我有一个由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');
    });
}

标签： javascriptjquery

解决方案

您没有遍历分配给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>

推荐阅读