Javascript 检查类中的数字并向其中添加类

我是新的编码，所以我真的不知道我在寻找什么。问题是，当我将鼠标悬停在现有类中时，我想将一个类添加到现有类中，当我将鼠标悬停在现有类中时，它应该删除该类。现在我有三个combo类，如您所见（.image-1、.image-2、.image-3），我想分别向它们添加类“isplay”，因为它们有不同的内容

现在，我只是复制了函数，但是你知道一种更优雅或更简单的方法吗

（我尝试使用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>

$（“.category.image-1”）。悬停(
函数（）{
$（此）.addClass（“iPlay”）；
},
函数（）{
$（此）.removeClass（“iPlaying”）；
}
);
$（“.category.image-2”）。悬停(
函数（）{
$（此）.addClass（“iPlay”）；
},
函数（）{
$（此）.removeClass（“iPlaying”）；
}
);
$（“.category.image-3”）。悬停(
函数（）{
$（此）.addClass（“iPlay”）；
},
函数（）{
$（此）.removeClass（“iPlaying”）；
}
);

注意：首先要确保我们这里没有发生意外。也就是说，如果您想在悬停时向元素添加不同的样式，并在鼠标输出时删除这些样式，那么使用pseudo类可能是更好的选择

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

如果

.isplay

所做的不仅仅是基本的样式，那么使用JS就可以了。但是，如果只是设计样式，

：hover

可能是更好的选择

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

继续

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

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

$（“.category.image-1、.category.image-2、.category.image-3”）。悬停(
函数（）{
$（此）.addClass（“iPlay”）；
},
函数（）{
$（此）.removeClass（“iPlaying”）；
}
);

如果确实希望将悬停效果保留到具有

.category

类和

图像-$NUMBER

类的元素，则可以在

类

属性上使用。即

[attr*=value]

通配符选择器

因此，像

.category[class*=“image-”]

这样的选择器将匹配与

.image-

类关联的任何数字

$（“.category[class*='image-']）。悬停(
函数（）{
$（此）.addClass（“iPlay”）；
},
函数（）{
$（此）.removeClass（“iPlaying”）；
}
);

关于

[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>

---

由于所有元素都共享一个公共类，

.category

，因此它可以用作单个函数的选择器

$（此）

将表示当前元素

$（“.category”）。悬停(
函数（）{
$（此）.addClass（“iPlay”）；
},
函数（）{
$（此）.removeClass（“iPlaying”）；
}
)

.category{
背景：#e6；
宽度：100px；
高度：100px；
显示：内联块；
}
.网络播放{
背景：绿色；
}

第一类
第2类
第3类

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

图像-

类：

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

---

这将为您提供具有class

category

的元素，并且

class

属性还包含以下

image-

。这将与您的所有3个元素（以及任何其他元素）匹配。

您只需使用公共选择器

即可。类别
，因为使用这些
图像-
类是多余的

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

此外，如果您只想在JS中处理样式而不是逻辑，那么您可以通过CSS更好地完成以下工作：

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

还有一个建议，不要使用类来表示唯一性。您可以使用ID来实现此目的
image-1
、
image-2
等都适合引用ID

希望有帮助
 您只需要一个函数。只需使用
$（“.category”）
作为选择器
$（此）
将作用于当前元素。如果
isplay
类只是更改样式属性，则只能使用CSS而不是JS onhover事件
.category.image-1:hover、.category.image-2:hover、.category.image-3:hover{…添加isplay的样式…}
您也可以在css中使用：hover选择器，而不使用javascript。非常感谢！成功了。但是我相信我不能只使用ID，因为我正在使用Webflow，在那里我需要使用combo类来给类分类不同的图像。非常感谢！我喜欢第二种方法。我会记住的。谢谢，但我需要更改背景图像。我可以用css做这个吗？