javascript - 如何在页面上的隐藏元素上使用 jQuery 添加类和删除类

Question

这是我的html代码：

<div class="Image" style="display: block;">1</div>
<div class="Image" style="display: none;">2</div>
<div class="Image" style="display: none;">3</div>
<div class="Image" style="display: none;">4</div>

display: block 属性将使用其他 javascript 代码从第 1 行到第 4 行运行。

我想将 addClass“滑入”添加到具有 display: block 属性的行，并将 addClass“滑出”添加到具有 display: none 属性的行。

这就是我想要的：

<div class="Image slide-in" style="display: block;">1</div>
<div class="Image slide-out" style="display: none;">2</div>
<div class="Image slide-out" style="display: none;">3</div>
<div class="Image slide-out" style="display: none;">4</div>

有没有办法做到这一点。请帮帮我，谢谢大家！

标签： javascriptjquery

Answer 1

是的，有可能。我们需要使用jQuery 的$.each函数来获取所有带有类的元素.Image并检查样式，如果是，block那么我们addClass就是类，slide-in否则我们添加类slide-out

为了检查当前样式 - 我们可以简单地使用.css方法jQuery来获取.cssstyle的当前样式elements。

此外，要向hidden元素添加类，我们需要virtually在DOMusing 块中显示它们>应用类滑出>再次隐藏它们。

现场工作演示：

$('.Image').each(function(i, el) {
  if ($(el).css("display") == 'block') {
    $(el).addClass('slide-in') //add Class slide-in
  } else {
    $(el).css("display", "block") //show them virtually
    $(el).addClass('slide-out') //apply class slide-out
    $(el).css("display", "none") //hide them again
  }
  console.log(el) //classes added
})

.slide-in {
  background: green;
}

.slide-out {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Image" style="display: block;">1</div>
<div class="Image" style="display: none;">2</div>
<div class="Image" style="display: none;">3</div>
<div class="Image" style="display: none;">4</div>