检查班级中的数字并向其添加班级

Question

我是编码新手，所以我并不是真正要寻找的东西。问题是我想在悬停时向现有类添加一个类，当我悬停时它应该删除该类。现在我有三个组合类，如您所见（.image-1、.image-2、.image-3），我想将“正在播放”类分别添加到所有这些类，因为它们具有不同的内容。

目前，我只是复制了这些功能，但您知道更优雅或更简单的方法吗？

（我尝试使用 if 语句检查字符串中的数字，但没有成功）。

提前致谢！

<script>
$(".category.image-1").hover(
  function () {
    $(this).addClass("isplaying");
  },
  function () {
    $(this).removeClass("isplaying");
  }
);
$(".category.image-2").hover(
  function () {
    $(this).addClass("isplaying");
  },
  function () {
    $(this).removeClass("isplaying");
  }
);
$(".category.image-3").hover(
  function () {
    $(this).addClass("isplaying");
  },
  function () {
    $(this).removeClass("isplaying");
  }
);
</script>

Answer 1

注意：首先要确保这里没有XY Problem 的案例。也就是说，如果您想在悬停时为元素添加不同的样式，并在鼠标移出时删除这些样式，那么使用:hover 伪类可能是更好的选择。

.category[class*='image-']:hover {
  /* Insert hover styles here */
}

如果.isplaying 所做的不仅仅是基本样式，那么使用 JS 就可以了。但是，如果只是造型，:hover 可能是更好的选择。

继续……

您拥有的代码相当于以下代码：

$(".category.image-1, .category.image-2, .category.image-3").hover(
  function () {
    $(this).addClass("isplaying");
  },
  function () {
    $(this).removeClass("isplaying");
  }
);

如果您确实希望将悬停效果保留到具有.category 类并且具有image-$NUMBER 类的元素，那么您可以使用@ class 属性上的 987654323@。即[attr*=value] 通配符选择器。

所以像.category[class*="image-"] 这样的选择器将匹配与.image- 类相关的任何数字。

$(".category[class*='image-']").hover(
  function () {
    $(this).addClass("isplaying");
  },
  function () {
    $(this).removeClass("isplaying");
  }
);

关于[attr*=value] 选择器有几件事需要了解。也就是说，它会匹配该字符串无论它在哪里。 所以[class*="image-"] 选择器将匹配以下任何元素：

<div class="image-1"></div>
<div class="image-"></div>
<div class="some-other-image-1"></div>
<div class="image-something-else"></div>

Answer 2

由于您的所有元素共享一个公共类 .category，因此可以将其用作单个函数的选择器。

$(this) 将代表当前元素。

$(".category").hover(
  function () {
    $(this).addClass("isplaying");
  },
  function () {
    $(this).removeClass("isplaying");
  }
)

.category {
  background: #e6e6e6;
  width: 100px;
  height: 100px;
  display: inline-block;
}

.isplaying {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="category category-1">
  Category 1
</div>
<div class="category category-2">
  Category 2
</div>
<div class="category category-3">
  Category 3
</div>

当然，这可以用 CSS 来完成，你要做的就是改变样式。

.category {
  background: #e6e6e6;
  width: 100px;
  height: 100px;
  display: inline-block;
}

.category:hover {
  background: green;
}

<div class="category category-1">
  Category 1
</div>
<div class="category category-2">
  Category 2
</div>
<div class="category category-3">
  Category 3
</div>

Answer 3

您可以使用选择器中的类来匹配image- 类：

$(".category[class*='image-']").hover(
  function () {
    $(this).addClass("isplaying");
  },
  function () {
    $(this).removeClass("isplaying");
  }
);

这将为您提供具有类category 的元素，并且class 属性还包含以下image-。这将与您的所有 3 个（以及任何其他）元素匹配。

Answer 4

您可以使用 .category 的公共选择器来做到这一点，因为使用那些 image- 类是多余的。

$(".category").hover(
   function () {
     $(this).addClass("isplaying");
   },
   function () {
     $(this).removeClass("isplaying");
   }
)

另外，如果你只打算在 JS 中处理样式而不是逻辑，你最好只使用 CSS 来完成，如下所示：

.category:hover {
   // Your styling goes here
}

还有一个建议，不要为了唯一性而使用类。您可以为此目的使用 ID。 image-1、image-2 等适合引用 ID。

希望对你有帮助！