Question

我有一个从数据库返回给我的类数组。类似的东西：

var styleClasses = ["ClassA", "ClassB", "ClassC", "ClassD"];

我有一个页面，其中标记类似于：

<div class="main-details">
            <div class="ClassA" style="display:none;">
                <div class="Inner-Details">

                </div>
                <div class="Inner-Details">

                </div>
            </div>
            <div class="ClassB" style="display:none;">
                <div class="Inner-Details">

                </div>
                <div class="Inner-Details">

                </div>
            </div>
            <div class="ClassC" style="display:none;">
                <div class="Inner-Details">

                </div>
                <div class="Inner-Details">

                </div>
            </div>
</div>

我想要实现的是，无论我的数组中有什么类，我都希望显示相应的div。我可以使用.each函数遍历数组并获取值，但我不知道如何将其与div类匹配并相应地显示它。

Answer 1

只需在.each()的每次迭代中对类使用jQuery函数.show()。

var styleClasses = ["ClassA", "ClassB", "ClassC", "ClassD"];

$(styleClasses).each(function(){
    $('.'+this).show(); // does this:  $('.classA').show();
});

JSFiddle Demo

Answer 2

var styleClasses = ["ClassA", "ClassB", "ClassC", "ClassD"];
styleClasses.forEach(function(class){
    Array.prototype.forEach.call(document.getElementsByClassName(class),function(el){
       el.style.display="block";
    });
});

迭代这些类，然后遍历该类中的每个元素并添加样式。

Answer 3

<input type="file" accept="images/*" name="images" id="images" onClick="showModal()">
<script>
    function showModal(){
        alert("hi");
    }
</script>

$(function(){
  var styleClasses = ["ClassA", "ClassB", "ClassC", "ClassD"];

  for (var i = 0; i < styleClasses.length; i++) {
     $('.'+styleClasses[i]).show();
  }
})

Answer 4

var styleClasses = ["ClassA", "ClassB", "ClassC", "ClassD"];
for (var i = 0; i < styleClasses.length; i++) {


  $('.' + styleClasses[i]).show()
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-details">
  <div class="ClassA" style="display:none;">1
    <div class="Inner-Details">

    </div>
    <div class="Inner-Details">

    </div>
  </div>
  <div class="ClassB" style="display:none;">2
    <div class="Inner-Details">

    </div>
    <div class="Inner-Details">

    </div>
  </div>
  <div class="ClassC" style="display:none;">3
    <div class="Inner-Details">

    </div>
    <div class="Inner-Details">

    </div>
  </div>
</div>

循环数组并将其用作选择器。

循环数组并显示相应的div

4 个答案: