时间戳

首页 > 解决方案 > 如何在 jQuery 中随机化 .hasClass() 中的 .class 名称

javascript - 如何在 jQuery 中随机化 .hasClass() 中的 .class 名称

问题描述

我有这样的代码：

$(".user-items").each(function() {
  if ($(this).hasClass("don't know the code yet")) {
    $(this).fadeIn();
  } else {
    $(this).fadeOut();
  }
});

但我希望它像这样工作：

$(".user-items").each(function() {
  if ($(this).hasClass(".people OR .photos OR .videos")) {
    $(this).fadeIn();
  } else {
    $(this).fadeOut();
  }
});

我想在每个循环中随机化3 个类.each()并使所有匹配的元素淡入/淡出

注意*：里面的“OR”.hasClass只是对我希望它如何工作的解释

<a href="javascript:void(0);" class="user-items people">People</a>

<a href="javascript:void(0);" class="user-items photos">Photo</a>

<a href="javascript:void(0);" class="user-items videos">Videos</a>
...
...
...
lots of more .user-items classes with 3 given classes: .people, .photos, .videos

谢谢

标签： javascriptjquery

解决方案

您可以使用一个类数组然后random()方法来每次获取一个随机类，例如：

var classes = ['photos', 'videos', 'people'];

$(".user-items").each(function() {
  var random_class = classes[Math.floor((Math.random() * classes.length) + 0)];

  console.log(random_class);

  if ($(this).hasClass(random_class)) {
    $(this).fadeIn();
  } else {
    $(this).fadeOut();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:void(0);" class="user-items people">People</a>
<br>
<a href="javascript:void(0);" class="user-items photos">Photo</a>
<br>
<a href="javascript:void(0);" class="user-items videos">Videos</a>

推荐阅读