2

我是编码新手，所以我真的不是我要找的东西。问题是我想在悬停时向现有类添加一个类，当我悬停时它应该删除该类。现在我有三个组合类，如您所见（.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>
4

4 回答 4

0

注意：首先重要的是要确保我们这里没有XY 问题的情况。也就是说，如果您想在悬停时为元素添加不同的样式，并在鼠标移出时删除这些样式，那么使用: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。即[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>
于 2020-02-07T14:55:20.450 回答
0

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

于 2020-02-07T14:56:51.903 回答
0

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

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

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

于 2020-02-07T15:02:10.527 回答
0

您可以使用通用选择器来做到这一点，.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。

希望能帮助到你！

于 2020-02-07T15:09:39.733 回答