Ich bin neu im Codieren und daher nicht wirklich das, wonach ich suche. Das Problem ist, dass ich einer Klasse eine Klasse hinzufügen möchte, wenn ich mit der Maus darüber schwebe, und wenn ich mit der Maus darüber schwebe, sollte die Klasse entfernt werden. Jetzt habe ich drei Kombinationsklassen, wie Sie sehen können (.image-1, .image-2, .image-3), und ich möchte allen die Klasse "isplaying" hinzufügen, da sie unterschiedliche Inhalte haben.

Im Moment habe ich nur die Funktionen dupliziert, aber kennen Sie einen eleganteren oder einfacheren Weg?

(Ich habe versucht, eine if-Anweisung zu verwenden, um die Nummer in der Zeichenfolge zu überprüfen, aber es hat nicht funktioniert).

Danke im Voraus!

<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>
2
Sebastian Wieser 7 Feb. 2020 im 17:50

4 Antworten

Beste Antwort

Sie können die Klasse in Ihrer Auswahl verwenden, um die image- Klassen abzugleichen:

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

Dadurch erhalten Sie die Elemente mit den Klassen category und das Attribut class enthält auch die folgenden image-. Dies stimmt mit allen 3 (und allen zusätzlichen) Ihrer Elemente überein.

0
Shahzad B 7 Feb. 2020 im 15:02

Da alle Ihre Elemente eine gemeinsame Klasse haben, .category, kann diese als Selektor für eine einzelne Funktion verwendet werden.

$(this) repräsentiert das aktuelle 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>

Dies kann natürlich mit CSS erfolgen. Sie möchten lediglich den Stil ändern.

.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>
0
Turnip 7 Feb. 2020 im 14:56

Sie können dies einfach mit dem allgemeinen Selektor .category tun, da die Verwendung dieser image- Klassen redundant ist.

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

Wenn Sie in JS nur am Styling und nicht an der Logik arbeiten, können Sie dies besser mit nur CSS wie folgt tun:

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

Noch ein Vorschlag: Verwenden Sie die Klasse nicht für die Eindeutigkeit. Sie können ID für diesen Zweck verwenden. image-1, image-2 usw. eignen sich zum Verweisen auf IDs.

Ich hoffe es hilft!

0
Wolverine 7 Feb. 2020 im 15:09

HINWEIS : Es ist zunächst wichtig sicherzustellen, dass kein XY-Problem vorliegt hier. Wenn Sie also einem Element beim Hover verschiedene Stile hinzufügen und diese in einem Mouseout entfernen möchten, verwenden Sie möglicherweise :hover Pseudoklasse ist eine bessere Wahl.

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

Wenn .isplaying mehr als nur das grundlegende Styling leistet, ist die Verwendung eines JS in Ordnung. Wenn es sich jedoch nur um ein Styling handelt, ist :hover möglicherweise die bessere Wahl.

Weitermachen ...

Der Code, den Sie haben, entspricht dem folgenden:

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

Wenn Sie wirklich die Hover-Effekte für Elemente beibehalten möchten, die die Klasse .category und eine Klasse image-$NUMBER haben, können Sie eine verwenden Attributauswahl für das Attribut class. Nämlich die [attr*=value] Platzhalterauswahl.

Ein Selektor wie .category[class*="image-"] stimmt also mit jeder Zahl überein, die an eine .image- Klasse gebunden ist.

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

Es gibt ein paar Dinge, die Sie über den [attr*=value] Selektor wissen sollten. Das heißt, dass es mit dieser Zeichenfolge übereinstimmt, wo immer es auch sein mag. Der [class*="image-"] - Selektor stimmt also mit einem der folgenden Elemente überein:

<div class="image-1"></div>
<div class="image-"></div>
<div class="some-other-image-1"></div>
<div class="image-something-else"></div>
0
romellem 7 Feb. 2020 im 17:49