检查 class 中的数字并向其添加 class

Question

我是编码新手，所以我并不是真正想要的东西。问题是我想在悬停时向现有 class 添加 class，当我悬停在外时，它应该删除 class。现在我有三个组合 classes，如您所见 (.image-1, .image-2, .image-3) 我想将 class "isplaying" 添加到所有他们单独因为他们有不同的内容。

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

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

NOTE: It is first important to make sure we don't have a case of an XY Problem here. That is, if you want to add different styles to an element on hover, and remove those on a mouseout, then maybe using the :hover pseudo-class is a better choice.
.category[class*='image-']:hover {
  /* Insert hover styles here */
}
If .isplaying is doing more than basic styling, then using a JS is OK. However, if it is just styling, :hover might be the better choice.

Moving on...

您拥有的代码等同于以下内容：

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

如果您确实想要将悬停效果保留在具有.category class 和有一个 image-$NUMBER class，那么你可以在 class 属性上使用 attribute selector。即 [attr*=value] 通配符选择器。

所以像 .category[class*="image-"] 这样的选择器将匹配任何绑定到 .image- class 的数字。

$(".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

由于您的所有元素共享一个公共的 class、.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

您可以在选择器中使用 class 来匹配 image- classes:

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

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

Answer 4

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

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

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

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

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

希望对您有所帮助！

检查 class 中的数字并向其添加 class

Checking a number in a class and adding a class to it

javascript

class

webflow