jquery immer per click die Position erhöhen

dr_colossos · #1 (**permalink**) 19.04.2012, 15:32

Hallo, stehe wirklich vor einem eher trivialen Problem, bekomme es aber nicht gebacken ..

Ich habe eine Liste, die bei einem KLICK 80px in die Höhe geschoben wird:

HTML-Code:

jQuery("#down").click(function() {
    
    jQuery('#cont').each(function() {
        jQuery(this).css('top','-80px');

    });
});

#down ist mein PFEIL und der #cont wird nach oben verschoben.

Wie kann ich hier mit einem Zähler/Variable es so machen, dass bei jedem KLICk die 80 px hinzu kommen? Das mit der each()-Funktion bekomme ich nicht hin.

Bin für jede Hilfe oder Wink dankbar.

Gruß

David · #2 (**permalink**) 19.04.2012, 16:11

Selector.each() iteriert über eine Gruppe von Elementen. In einem validen HTML-Element findet der ID-Selektor aber maximal ein Element. Von daher ist Selector.each hier fehl am Platze.

Beim Klick einfach: aktuellen Wert auslesen, (ggf. in einen Integer überführen), 80 dazuzählen, neuen Wert mit der Einheit 'px' setzen.

Chris2011 · #3 (**permalink**) 19.04.2012, 16:25

So ungefähr

Code:

<!DOCTYPE html>
<html>
<head>
  <style>
  #test { width:80px; height:80px; border:1px solid red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
  <div id="test"></div>
  
<script>
    $("#test").click(function () {
       muh = $(this).css("margin-top").replace("px", "");//aktueler wert
       $(this).css("margin-top", parseFloat(muh) +80+"px")//string in einen integer umwandeln und +80
    });
</script>

</body>
</html>

David · #4 (**permalink**) 19.04.2012, 16:38

Wenn Du es schon in eine Globale schreibst, dann musst Du es nicht jedesmal wieder auslesen

Frederick · #5 (**permalink**) 19.04.2012, 16:51

Hallo,

"etwas" eleganter und einfacher geht's so:

<!DOCTYPE html>
<html>
<head>
<style>
#test, #test2 { width:80px; height:80px; border:1px solid red; float:left;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<div id="test">#test</div>
<div id="test2">#test2</div>

<script>
$("#test").click(function () {
muh = $(this).css("margin-top").replace("px", "");//aktueler wert
$(this).css("margin-top", parseFloat(muh) +80+"px")//string in einen integer umwandeln und +80
});
$("#test2").click(function () {
$(this).css("margin-top", "+=80px");
});
</script>

</body>
</html>

Gruß,
Frederick

dr_colossos · #6 (**permalink**) 19.04.2012, 16:56

Vielen Dank an euch beide. So habe ich es dank eurer Hilfe umgesetzt:

HTML-Code:

jQuery('#down').click(function() {
	var pos = jQuery('#cont').css("top").replace("px", "");
	jQuery('#cont').css("top", parseFloat(pos) + -80 +"px");
});

jQuery('#up').click(function() {
	var pos = jQuery('#cont').css("top").replace("px", "");
	jQuery('#cont').css("top", parseFloat(pos) + 80 +"px");
});

Dass man beim letzten, erreichten <li> meiner Liste anhält gibt wohl der nächste Thread .. hehe. Aber ich kämpfe mich erst mal so durch.

Danke.

Frederick · #7 (**permalink**) 19.04.2012, 18:10

Hallo,

nein, mach's nicht so. Das ist doch hässlich. Was spricht gegen "+=80px" bzw. "-=80px". Da brauchst Du nicht extra den aktuellen Wert ausreichnen... schau mal in meinem ersten Posten ab "$('#test2').click(function...". Ist doch viel kürzer und hypscher.

Gruß,
Freddy

protonenbeschleuniger · #8 (**permalink**) 22.04.2012, 11:01

jquery hat eine gute Doumentation und da findet sich auch das: .position() – jQuery API

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Div-Anordnung unterschiedlich - Warum?	AndMei	CSS	2	15.12.2010 21:22
div-höhe? - Hauptcontainer über ganze Seite will nicht...	AndMei	CSS	5	13.12.2010 14:43
Problem mit einem 3D-Effekt	moep0710	CSS	12	12.06.2010 14:30
Was übersehe ich?	Psyclown	CSS	2	19.10.2008 13:00
prblemme mit mein inhalt div	carlos587261	CSS	3	23.04.2008 14:07