Ciao a tutti,
ho 3+ DIV uno sotto l'altro, ognuno ha un pulsante "up" e uno "down", vorrei fare in modo che al click faccia slittare su o giù il div e di conseguenza anche il div settostante o precedente, in modo che si scambino posizione e che cambi anche il value degli input text all'interno dei due div interessati.
Qualcosa son riuscito fare, ecco qua il codice:
codice:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#box1 {
position:absolute;
background-color: #F90;
top: 100px;
left:50px;
width:90px;
height:50px;
margin:5px;
text-align:center;
}
#box2 {
position:absolute;
background-color: #6CF;
top: 150px;
left:50px;
width:90px;
height:50px;
margin:5px;
text-align:center;
}
#box3 {
position:absolute;
background-color: #6F6;
top: 200px;
left:50px;
width:90px;
height:50px;
margin:5px;
text-align:center;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function upDiv(id){
$("#box"+id).animate({"top": "-=50px"}, "slow");
var ValueUp = $("#input"+id).val();
$("#input"+id).val(parseInt(ValueUp)-1);
var newValueUp = $("#input"+id).val();
// box precedente
$("#box"+(parseInt(newValueUp))).animate({"top": "+=50px"}, "slow");
var ValueUp2 = $("#input"+(parseInt(newValueUp))).val();
$("#input"+(parseInt(newValueUp))).val(parseInt(ValueUp2)+1);
}
function downDiv(id){
$("#box"+id).animate({"top": "+=50px"}, "slow");
var ValueDown = $("#input"+id).val();
$("#input"+id).val(parseInt(ValueDown)+1);
var newValueDown = $("#input"+id).val();
// box successivo
$("#box"+(parseInt(newValueDown))).animate({"top": "-=50px"}, "slow");
var ValueDown2 = $("#input"+(parseInt(newValueDown))).val();
$("#input"+(parseInt(newValueDown))).val(parseInt(ValueDown2)-1);
}
</script>
</head>
<body>
<form name="form1" method="post" action="test_result.asp">
<div id="box1" title="1">
up down
<input type="text" id="input1" name="input1" value="1" size="2">
</div>
<div id="box2" title="2">
up down
<input type="text" id="input2" name="input2" value="2" size="2">
</div>
<div id="box3" title="3">
up down
<input type="text" id="input3" name="input3" value="3" size="3">
</div>
</form>
</body>
</html>
con il codice postato qui sopra funziona solo in parte, perchè va bene solo al primo click su "up" o "down" poi si sballa tutto..
In pratica l'errore è dovuto al fatto che richiamo l'ID del div prec/succ che al primo click va bene, ma poi ovviamente ai click successivi l'ID non è più il prec/successivo.
Quindi penso basterebbe richiamare il DIV successivo/precedente in modo relativo, ma non so come fare..
Oppure posso richiamare un DIV non per l'ID ma per attributo?
Scritto così sembra un pò incasinato
ma provate a copiare il codice della pagina html e si capisce subito cosa vorrei ottenere.
Grazie.