jquery - 如何使用 jquery 获取 div 的样式

Question

我想创建一个函数来将display样式从更改none为block。我曾尝试使用 jQuery each()，但我不知道我哪里出错了或如何纠正它。

我已经为每个 jQuery 使用了一个数组，但是当我尝试使用它时出现错误。

var ar = [];
ar.push(x1a, x2a, x3a, x4a, x5a, x6a);

$.each(ar, function() {
  console.log(ar[5]);
  if (ar.style.display === "none") {
    ar.style.display = "block";
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div">
  <p id="x1">hello 1</p>
  <span id="x1a" style="display: none;">hello 1 hello</span>
</div>
<div class="div">
  <p id="x2">hello 2</p>
  <span id="x2a" style="display: none;">hello 2 hello</span>
</div>
<div class="div">
  <p id="x3">hello 3</p>
  <span id="x3a" style="display: none;">hello 3 hello</span>
</div>
<div class="div">
  <p id="x4">hello 4</p>
  <span id="x4a" style="display: none;">hello 4 hello</span>
</div>
<div class="div">
  <p id="x5">hello 5</p>
  <span id="x5a" style="display: none;">hello 5 hello</span>
</div>
<div class="div">
  <p id="x6">hello 6</p>
  <span id="x6a" style="display: none;">hello 6 hello</span>
</div>

标签： jquery

Answer 1

您当前代码的问题在于它ar是对整个数组的引用。您需要访问其中的每个单独元素。为此，$.each()向函数处理程序提供两个参数，第二个参数是迭代器中的当前元素。因此，您的代码应类似于以下示例：

var ar = [];
ar.push(x1a, x2a, x3a, x4a, x5a, x6a);

$.each(ar, function(i, el) {
  if (el.style.display === "none") {
    el.style.display = "block";
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div">
  <p id="x1">hello 1</p>
  <span id="x1a" style="display: none;">hello 1 hello</span>
</div>
<div class="div">
  <p id="x2">hello 2</p>
  <span id="x2a" style="display: none;">hello 2 hello</span>
</div>
<div class="div">
  <p id="x3">hello 3</p>
  <span id="x3a" style="display: none;">hello 3 hello</span>
</div>
<div class="div">
  <p id="x4">hello 4</p>
  <span id="x4a" style="display: none;">hello 4 hello</span>
</div>
<div class="div">
  <p id="x5">hello 5</p>
  <span id="x5a" style="display: none;">hello 5 hello</span>
</div>
<div class="div">
  <p id="x6">hello 6</p>
  <span id="x6a" style="display: none;">hello 6 hello</span>
</div>

但是，您应该注意，您的代码比它需要的要复杂得多。

如果您的目标是简单地切换span内部.div元素的显示状态，请选择它们并调用toggle()，如下所示：

$('.div span').toggle();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div">
  <p id="x1">hello 1</p>
  <span id="x1a" style="display: none;">hello 1 hello</span>
</div>
<div class="div">
  <p id="x2">hello 2</p>
  <span id="x2a" style="display: none;">hello 2 hello</span>
</div>
<div class="div">
  <p id="x3">hello 3</p>
  <span id="x3a" style="display: none;">hello 3 hello</span>
</div>
<div class="div">
  <p id="x4">hello 4</p>
  <span id="x4a" style="display: none;">hello 4 hello</span>
</div>
<div class="div">
  <p id="x5">hello 5</p>
  <span id="x5a" style="display: none;">hello 5 hello</span>
</div>
<div class="div">
  <p id="x6">hello 6</p>
  <span id="x6a" style="display: none;">hello 6 hello</span>
</div>