JavaScript jQuery: next/prev abhängig von odd/even

Mr. Snoot · 21. Juli 2011

Hio,

ich möchte für eine Mouseover-Aktion prüfen, ob das aktuelle Element gerade oder ungerade ist.

wenn das aktuelle Element ungerade ist, möchte ich (unter anderem) das nächste Element ansprechen
wenn das aktuelle Element gerade ist, möchte ich (unter anderem) das vorherige Element ansprechen

Ganz ausführlich wäre es wie folgt, aber dadurch ergibt sich natürlich doppelt so viel Code wie notwendig, wenn man next/prev direkt abhängig von odd/even wählen könnte:

PHP:

$("li:nth-child(odd)").mouseenter(function () {
  $(this).animate({"width": "200px"}, 400)
         .next("li").animate({"width": "82px"}, 400);
});
$("li:nth-child(odd)").mouseleave(function () {
  $(this).animate({"width": "141px"}, 400)
         .next("li").animate({"width": "141px"}, 400);
});


$("li:nth-child(even)").mouseenter(function () {
  $(this).animate({"width": "200px"}, 400)
         .prev("li").animate({"width": "82px"}, 400);
});
$("li:nth-child(even)").mouseleave(function () {
  $(this).animate({"width": "141px"}, 400)
         .prev("li").animate({"width": "141px"}, 400);
});

Das lässt sich dich bestimmt bewerkstelligen, oder? Alle meine Versuche enden darin, dass sich plötzlich mehr als nur ein Element angesprochen fühlen

narzissm · 21. Juli 2011

Dass sich mehr als ein Element angesprochen fühlen, ist mehr als logisch, da du einerseits das Element welches mouseenter auslöst animierst und außerdem das nächste/vorherige.

Ich weiß nicht genau was du bauen willst. Aber so wie du es erklärst hast, müsste mmn folgender Code passen:

PHP:

$("li:nth-child(odd)").mouseenter(function() {
    $(this).next("li").animate({"width": "82px"}, 400);
});
$("li:nth-child(odd)").mouseleave(function() {
    $(this).next("li").animate({"width": "141px"}, 400);
});


$("li:nth-child(even)").mouseenter(function() {
    $(this).prev("li").animate({"width": "82px"}, 400);
});
$("li:nth-child(even)").mouseleave(function() {
    $(this).prev("li").animate({"width": "141px"}, 400);
});

Mr. Snoot · 21. Juli 2011

Mein Code funktioiert soweit schon; ich wollte ihn wenn möglich nur gerne kürzen, da der Code für odd und even ja zu 99% identisch ist.

Benutzen will ich das ganze hier in der oberen linken Box bei Grundlagen, da dort teils nicht genug Platz für die Texte ist.

Also quasi:

PHP:

if(odd) {next} else {prev}

P.S. ich möchte unter anderem das next/prev Element ansprechen; $(this).animate(..) soll also schon auch noch mit dabei sein.

NullPointer · 22. Juli 2011

Ich würde das in etwa so versuchen:

PHP:

$("li").mouseenter(function () {
  var index = $(this).prevAll().length + 1;
  if (index % 2 == 0) {
    // even
  } else {
    // odd
  }
});

Suche

JavaScript jQuery: next/prev abhängig von odd/even

Mr. Snoot

Gast

narzissm

Ensign

Mr. Snoot

Gast

NullPointer

Lt. Commander

Ähnliche Themen