Проверка числа в классе и добавление класса к нему

Question

Я новичок в кодировании, и поэтому я не совсем то, что я ищу. Проблема в том, что я хочу добавить класс к существующему классу при наведении курсора, а когда я наведите курсор на него, он должен удалить класс. Теперь у меня есть три комбинированных класса, как вы можете видеть (.image-1, .image-2, .image-3), и я хочу добавить класс «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

Вы можете просто сделать это с помощью общего селектора, который .category, поскольку использование этих image- классов избыточно.

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

Кроме того, если вы собираетесь работать только над стилем, а не с логикой c в JS, вы можете сделать это, просто набрав CSS следующим образом:

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

Еще одно предложение, не используйте класс для уникальности. Вы можете использовать ID для этой цели. image-1, image-2 и т. Д. Хороши для ссылки на идентификаторы.

Надеюсь, это поможет!

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

ПРИМЕЧАНИЕ : Прежде всего важно убедиться, что у нас нет случая XY Проблема здесь. То есть, если вы хотите добавить различные стили к элементу при наведении и удалить их при наведении мыши, то, возможно, лучше использовать псевдокласс :hover.

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

Если .isplaying выполняет больше, чем базовое c моделирование, тогда использование 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>