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

Question

I am new to coding and so I don't really what I am looking for. The problem is that I want to add a class to an existing class when hovering in and when I'm hovering out it should remove the class. Now I have three combo classes as you can see (.image-1, .image-2, .image-3) and I want to add the class "isplaying" to all of them individually because they have different content.

For now, I just duplicated the functions but do you know a more elegant or simpler way?

(I tried to use an if-statement to check the number in the string but it didn't work).

Thanks in advance!

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

You only need one function. Just use `$(".category")` as the selector. `$(this)` will be scoped to the current element. — Turnip, Feb 07 '20 at 14:52
If the `isplaying` class just changes styling properties, you can use CSS only instead of a JS onhover event. `.category.image-1:hover, .category.image-2:hover, .category.image-3:hover { ... add styling of isplaying... }` — Shilly, Feb 07 '20 at 14:56
You also could just use the :hover selector in your css instead of using javascript for this. — bryan60, Feb 07 '20 at 14:57

romellem · Answer 1 · 2020-02-07T17:49:01.710

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

The code that you have is equivalent to the following:

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

If you really do want to keep the hover effects to elements that have the .category class and have an image-$NUMBER class, then you can use an attribute selector on the class attribute. Namely the [attr*=value] wildcard selector.

So a selector like .category[class*="image-"] will match any number tied to a .image- class.

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

There are a couple of things to know about the [attr*=value] selector. Namely, that it'll match that string wherever it may be. So the [class*="image-"] selector will match an any of the elements below:

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

Thanks a lot! I love the second way of doing it. I'll keep that in mind. — Sebastian Wieser, Feb 07 '20 at 18:56

score 0 · Answer 2 · answered Feb 07 '20 at 14:56

Since all of your elements share a common class, .category, this can be used as the selector for a single function.

$(this) will represent the current element.

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

Of course, this could be done with CSS is all you want to do is change the style.

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

Thanks, but I would need to change the background image. Can I do this with css? — Sebastian Wieser, Feb 07 '20 at 18:56

score 0 · Accepted Answer · answered Feb 07 '20 at 15:02

You can use the class in your selector to match the image- classes:

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

This will give you the elements that have the classes category and the class attribute also contains the following image-. This will match with all 3 (and any additional) of your elements.

score 0 · Answer 4 · answered Feb 07 '20 at 15:09

You can just do that with the common selector which is .category as using those image- classes are redundant.

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

Also, if you are only going to work on styling rather than logic in JS, you can better do it with just CSS as following:

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

One more suggestion, don't use class for uniqueness. You can use ID for that purpose. image-1, image-2 and so on are good for referencing IDs.

Hope it helps!

Thanks a lot! That worked. But I believe I can't solely use an ID because I'm working with Webflow and there I need to use combo classes to give the class categorie different images. — Sebastian Wieser, Feb 07 '20 at 18:55

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

4 Answers4